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内 容 简 介 


Vue.js 是 一 个 用 来 开发 Web 界面 的 前 端 库 。 本 书 致力 于 普及 国内 Vue.js 技术 体系 , 让 更 多 喜欢 前 端的 
人 员 了 解 和 学 习 Vue.js。 如 果 你 对 Vue.js 基础 知识 感 兴趣 ， 如 果 你 对 源码 解析 感 兴趣 ， 如 果 你 对 Vue.js 2.0 
感 兴趣 ， 如 果 你 对 主流 打包 工具 感 兴趣 ， 如 果 你 对 如 何 实践 感 兴趣 ， 本 书 都 是 一 本 不 容错 过 的 以 示例 代码 
为 引导 、 知 识 涵盖 全 面 的 最 佳 选择 。 

全 书 一 共 30 章 ， 由 浅 入 深 地 讲解 了 Vuejs 基本 语法 及 源码 解析 。 主 要 内 容 包 括 数 据 绑 定 、 指 令 、 表 
单 控件 绑 定 、 过 滤器 、 组 件 、 表 单 验 证 、 服 务 通 信 、 路 由 和 视图 、vue-cli、 测 试 开发 和 调试 、 源 码 解 析 及 
主流 打包 构建 工具 等 。 该 书 内 容 全 面 ， 讲 解 细致 ， 示 例 丰富 ， 适 用 于 各 层次 的 开发 者 。 
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三 年 前 刚 开 始 写 Vuejs 的 第 一 个 原型 的 时 候 ， 我 并 没有 奢望 太 多 。 而 今天 在 我 打下 这 行 字 
的 时 候 ，Vuejs 在 GitHub 上 已 经 有 超过 两 万 五 干 颗 star， 在 npm 上 有 超过 一 百 万 次 的 下 载 ，3 
在 全 球 各 地 拥有 十 儿 万 的 用 户 。 同 时 ,得 益 于 社区 的 大 力 支 持 , ERASE PHBA Vue.js 的 开发 ， 
以 开源 作为 我 的 全 职工 作 。 


在 设计 思想 上 ，Vuejs 尤为 注重 上 手 的 学 习 曲 线 ， 这 也 是 Vuejs 吸引 很 多 用 户 的 一 个 重要 
原因 。 但 随 着 近年 来 产品 对 前 端的 需求 不 断 提高 ， 前 端 工程 的 复杂 度 也 在 不 断 提升 。 因 此 ， 初 
学 者 免不了 在 实际 的 生产 应 用 中 遇 到 各 种 文档 中 难以 覆盖 的 细节 问题 。 


在 国内 ，Vue.js 被 大 量 行业 领先 的 科技 公司 在 生产 中 广泛 使 用 ， 这 其 中 就 包括 本 书 作者 小 
春 所 就 职 的 滴 滴 出 行 。 本 书包 含 了 大 量 在 实践 中 总 结 出 的 Vuejs 使 用 经 验 ， 并 且 能 看 出 作者 对 
Vue.js 的 内 部 实现 做 了 深入 的 研究 ， 相 信 能 为 国内 学 习 Vuejs 的 开发 者 们 提供 有 价值 的 帮助 。 
Vuejs 的 迅速 成 长 ， 在 很 大 程度 上 得 益 于 社区 用 户 与 他 人 分 享 经 验 心 得 的 热心 。 在 这 里 ， 我 也 
对 小 春 和 滴 滴 公 共 前 端 团 队 为 本 书 付出 的 心血 表示 衷心 的 感谢 。 


尤 雨 溪 
Vue.js 作者 
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本 书 是 一 本 全 方位 讲解 Vuejs， 从 入 门 到 精通 的 权威 指南 。 
MA 


你 将 学 到 : 


O Vue.js 基本 语法 


O Vue.js 源码 解析 
O 如何 开发 一 个 完整 的 组 件 


O ”如何 集 成 第 三 方 组 件 


O 如 果 构 建 和 调试 一 个 Vue 的 项 


O 主流 打包 构建 工具 的 使 用 


O Vue.js 2.0 


O Scrat 与 Vue.js 结合 


本 书 读者 对 象 


本 书写 给 从 未 使 用 Vue.js 开发 项 目 或 想 深 入 了 解 Vue.js 原理 的 读者 ， 同 时 也 适合 热衷 于 追 
求 新 技术 、 探 索 新 工具 的 读者 。 特 此 声明 : 本 书 基础 语法 讲解 基于 Vue.js 1.0 版 本 ， 其 中 涵盖 了 
与 其 他 版 本 的 比较 。 我 们 假设 读者 已 经 掌握 了 HTML Fil CSS. Jf E.AZS JavaScript 基础 知识 。 


如 何 阅 读本 书 


如 果 你 从 事 Web 开发 工作 ， 之 前 没有 接触 过 Vue.js， 建 议 从 第 1 章 开始 仔细 阅读 ， 并 亲手 
实践 每 个 章节 提供 的 示例 ， 可 以 加 深 理 解 ， 如 果 你 已 经 使 用 Vuejs 开发 项 目 ， 则 可 以 跳 过 前 面 
基础 知识 ， 直 接 进入 源码 解析 篇 ， 让 我 们 共同 探索 Vue.js 是 如 何 实现 的 ， 以 及 有 哪些 值得 借鉴 
学 习 的 知识 ;如 果 你 想 看 看 Vue.js 2.0 都 发 生 了 什么 转变 ， 请 直接 进入 Vue.js 2.0 章节 阅读 ， 如 
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果 你 想 了 解 打包 构建 工具 如 何 使 用 ， 请 直接 进入 工具 篇 ， 那 里 有 三 款 打 包工 具 供 选 择 。 和 希望 你 
阅 


本 书 结构 
每 个 章节 的 开头 都 会 介绍 一 个 概念 ， 帮 你 了 解 该 音节 所 讲 内 容 是 什么 ， 以 便 快速 了 解 或 准 
确 地 找到 所 关注 的 内 容 


在 基础 知识 讲解 中 ， 节 中 都 会 有 大 量 丰 富 、 详 尽 的 示例 ， 方 便 你 更 全 面 地 掌握 所 讲解 
的 知识 。 


在 章节 最 后 还 会 附加 一 些 常 见 问题 ， 帮 助 你 快速 解决 问题 并 定位 问题 所 在 。 
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滴 滴 公 共 前 端 团队 从 2013 年 开始 接触 React 和 AngularJS， 以 及 后 来 的 Polymer， 在 项 目 实 
战 中 踩 过 了 各 种 坑 ， 参 与 了 一 些 公司 级 的 组 件 库 开 发 和 复杂 业务 模块 的 设计 ， 也 在 与 之 配套 的 
[ 程 化 闭环 里 做 了 很 多 解决 方案 。 


回 过 头 来 看 看 ， 这 几 年 的 前 端 开发 已 经 不 再 是 去 适 配 低 版 本 的 PC 浏览 器 ， 对 于 大 部 分 车 
内 一 线 的 移动 互联 网 公司 的 前 端 开 发 者 ， 移 动 端的 前 端 项 目 需求 尤其 强烈 ， 用 户 体验 也 一 再 被 
大 家 提 及 ， 页 面 已 经 不 能 简单 地 通过 重新 演 染 来 更 新 数据 的 频繁 变化 ， 后 端的 一 些 MVC 模式 
也 在 往 前 端 框架 迁移 。 


在 正式 学 习 Vuejs 之 前 ， 我 们 先 和 大 家 简单 地 回顾 一 下 MVX。 


11 MVX 模式 是 什么 


MVC 框架 最 早出 现在 Jaca 领域 ， 然 后 慢 慢 在 前 端 开发 中 也 被 提 到 ， 后 来 又 出 现 了 MVP, 
以 及 现在 最 成 熟 的 MVVM， 下 面 我 们 来 简单 介绍 一 下 各 种 模式 。 


1.1.1 MVC 
MVC 是 应 用 最 广泛 的 软件 架构 之 一 , 一 般 MVC 分 为 : Model (模型 )、Controller (控制 器 ) 


和 View〔 视 图 )。 这 主要 是 基于 分 层 的 目的 ， 让 彼此 的 职责 分 开 ， 如 图 1-1 Pros. 


View 一 般 都 是 通过 Controller 来 和 Model 进行 联系 的 。Controller 是 Model 和 View 的 协调 
者 ，View 和 Model 不 直接 联系 。 基 本 联系 都 是 单 疝 的 。 
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Qum 


图 1-1 MVC 通 信 方 式 一 


Controller 


那么 ， 用 户 操作 应 该 放 在 什么 位 置 ，MVC 之 间 又 会 有 什么 变化 ， 如 图 1-2 所 示 。 


View Controller 


1-2 MVC IR 


用 户 (User) 通过 Controller 来 操作 Model 以 达到 View 的 变化 。 


1.1.2 MVP 


MVP 是 从 经 典 的 MVC 模式 演变 而 来 的 ,它们 的 基本 思想 有 相通 的 地 方 : Controller/Presenter 
负责 逻辑 的 处 理 ，Model 提供 数据 ，View 负责 显示 。 


1E MVP +, Presenter 完全 把 View 和 Model 进行 了 分 离 , 主要 的 程序 逻辑 在 Presenter 里 实 
现 。 而 且 ，Presenter 与 具体 的 View 是 没有 直接 关联 的 ， 而 是 通过 定义 好 的 接口 进行 交互 ， 从 而 
使 得 在 变更 View 的 时 候 可 以 保持 Presenter 不 变 。MVP 通信 方式 如 图 1-3 所 示 。 


图 1-3 ”MVP 通信 方式 


1.1.3 MVVM 


MVVM 代表 村 


ERA: 知名 度 相 对 偏 低 的 Knockout、 早 


Google 的 AngularJS， 以 及 我 们 今天 要 讲 的 Vue.js。 


期 的 Emberjs、 目 前 比较 火热 的 来 自 


相 比 前 面 两 种 模式 ，MVVM 只 是 把 MVC 的 Controller 和 MVP 的 Presenter 改 成 了 
ViewModel。View 的 变化 会 自动 更 新 到 ViewModel, ViewModel 的 变化 也 会 自动 同步 到 view 


上 显示 。 
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这 种 自动 同步 是 因为 ViewModel 中 的 属性 实现 了 Observer， 当 属性 变更 时 都 能 触发 对 应 的 
操作 ， 如 图 1-4 所 示 。 


DataBinding 


图 1-4 ”用 户 操作 影响 


ViewModel 
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1.2 Vuejs 是 什么 


Vues 不 是 一 个 框架 一 一 它 只 聚焦 视图 层 ， 是 一 个 构建 数据 驱动 的 Web 界面 的 库 。Vue.js 
通过 简单 的 API 提供 高 效 的 数据 绑 定 和 灵活 的 组 件 系统 。 

KAA Vuejs 的 特性 。 

1. 确实 轻 量 


除了 以 MVP 模式 代表 的 Riotjs Sb, Vue.js 已 经 算是 前 端 库 里 面体 积 非 常 小 的 , 旦 不 依赖 其 
他 基础 库 。 


2. BEA 
对 于 一 些 富 交 互 、 状 态 机 类 似 的 前 端 UI 界面 ， 数 据 绑 定 非常 简单 、 方 便 。 
3. 指令 


类 似 于 AngularJS， 可 以 用 一 些 内 置 的 简单 指令 (v-*)， 也 可 以 自 定义 指令 ,通过 对 应 表达 
式 值 的 变化 就 可 以 修改 对 应 的 DOM. 


4. 插件 化 


Vuejs 核心 包 不 包含 Router、AJAX、 表 单 验 证 等 功能 ， 但 是 可 以 非常 方便 地 加 载 对 应 
的 插件 ， 后 续 章 节 我 们 会 做 完整 的 补充 说 明 。 


1.2.1 Vue.js 与 其 他 框架 的 区 别 


相信 很 多 读者 都 有 一 些 其 他 框架 (比如 AngularJS) 的 学 习 或 者 应 用 背景 ， 本 节 将 以 对 比方 
式 来 介绍 各 自 的 特点 。 


1. 5 AngularJS 的 区 别 


和 先 要 提 到 的 肯定 是 AngularJS， 它 来 自 Google, 是 目前 国内 最 火 的 前 端 框架 之 一 , 应 用 于 PC 
类 的 复杂 交互 系统 ， 我 们 内 部 也 产 出 了 一 套 基于 它 的 PC UI 组 件 库 。 那 两 者 到 底 有 什么 区 别 呢 ? 


相同 点 : 


O 都 支 持 指令 一 -内置 指 令 和 自 定义 指令 。 


O 都 支持 过 滤器 一 一 内 置 过 滤器 和 上 自 定义 过 小 器 。 


O 都 支持 双向 绑 定 。 


O ”都 不 支持 低 端 浏览 器 (比如 IE6/7/8): 


> Vue.js 使 用 比如 Array.isArray 的 ES 5 特性 。 


> AngularJS 1.3 开始 不 支持 IE 8。 
不 同 点 : 


O AngularJS 的 学 习 成 本 比较 高 ， 比 如 增加 了 Dependency Injection 特性 ， 而 Vue.js 本 身 提 
供 的 API 都 比较 简单 、 直 观 。 


O 在 性 能 上 ，AngularJS 依赖 对 数据 做 脏 检 查 ， 所 以 Watcher 越 多 越 慢 。Vue.js 使 用 基于 依 
赖 追 踊 的 观察 并 且 使 用 异步 队列 更 新 , 所 有 的 数据 都 是 独立 触发 的 。 对 于 庞大 的 应 用 来 
说 ， 这 个 优化 差异 还 是 比较 明显 的 。 


2. 与 React 的 区 别 

第 二 个 要 提 到 的 便 是 React， 来 自 Facebook， 在 国内 已 经 完全 复制 AngularJS 的 热潮 ， 成 为 
目前 受 关 注 度 很 高 的 前 端 框架 。 为 了 方便 没有 用 过 React 的 同学 理解 , 我 们 用 React 来 编写 一 个 
Footer 组 件 ， 代 码 示例 如 下 : 


«-- components/FooterView.jsx --> 

/** Qjsx React.DOM */ 

var FooterView = React.createClass ({ 
render: function () { 


return ( 
<footer> 
<p>DDFE love Vue.js</p> 
</footer> 
) 
} 
)); 


相同 点 : 


O React 采用 特殊 的 ISX 语法 ，Vue.js 在 组 件 开发 中 也 推 梁 编写 .vue 特殊 文件 格式 ， 对 文 
件 内 容 都 有 一 些 约定 ， 两 者 都 需要 编译 后 使 用 。 


O 中 心思 想 相同 : 一 切 都 是 组 件 ， 组 件 实例 之 间 可 以 括 套 。 


O 都 提供 合理 的 钧 子 函 数 ， 可 以 让 开发 者 定制 化 地 去 处 理 需 求 。 
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O 都 不 内 置 类 似 AJAX, Router 等 功能 到 核心 包 ， 而 是 以 其 


f 


BIA GEO 加 载 。 


O 在 组 件 开发 中 都 支持 mixins 的 特性 ， 具 体内 容 在 第 11 


不 同 点 : 


会 进行 介绍 。 


O React 依赖 Virtual DOM, iil Vue.js 使 用 的 是 DOM 模板 。React 采用 的 Virtual DOM 会 


对 泻 染 出 来 的 结果 做 脏 检查 。 


O Vues 在 模板 中 提供 了 指令 、 过 滤器 等 ， 可 以 非常 方便 、 


4| 


epee VE DOM. 


O 虽然 在 第 18 Æ Vue.js 2.0 中 也 会 提 到 支持 Virtual DOM， 但 是 


3. 5 Knockout 的 区 别 


Knockout 也 是 非常 轻 量 的 ， 甚 至 兼容 IE 6+ 的 MVVM 框架 。 


可 能 有 部 分 人 不 熟悉 Knockout， 代 码 示例 如 下 : 


<input data-bind-"value: firstName"» 


«input data-bind-"value:lastName"» 

<span data-bind-"text: fullName"></span> 

<script> 

var ViewModel = function(first, last) { 
this.firstName = ko.observable(first); 


this.lastName = ko.observable (last); 


this.fullName = ko.computed(function() { 
return this.firstName() + " " + this.lastName(); 
), this); 


ko.applyBindings (new ViewModel("DDFE", "FE")); 
«/script» 


相同 点 : 


O 都 用 到 了 数据 和 DOM 元 素 绑 定 。 


O DOM 元 素 都 是 基于 模板 的 。 


O AMER UI 和 数据 关联 ， 自 动 刷 新 。 


O 都 支持 依赖 跟踪 。 


两 者 还 是 有 差异 的 。 
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不 同 点 : 


$ 


O Knockout 的 所 有 可 观测 属性 都 需要 手动 用 observable 方法 来 初始 化 , 并 且 需 要 用 函数 调 
的 方式 来 操作 数据 。 


O Knockout 没有 ViewModel 之 间作 用 域 的 继承 。 


pany 
| 
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4. 与 Ractive.js 的 区 别 

Ractive.js 和 Vue.js API 很 像 , 通过 实例 化 一 个 Ractive 类 , 传 一 个 元 素 和 一 些 数据 、 模 板 等 ， 
但 是 它 用 字符 串 模板 ， 数 据 模型 和 Knockout 一 样 用 get 和 set， 本 身 代码 体积 较 大 。 

可 能 大 部 分 人 还 不 熟悉 Ractivejs， 代 码 示例 如 下 : 


<!-- 容 器 占 位 --> 
«div id="DDFE"></div> 


«script» 
var ractive = new Ractive(í 
el: "#DDFE", 
template: "<p> 我 们 是 一 群 热爱 分 享 的 前 端 同 学 ， 我 们 来 自 ((from))«/p»", 


data: (from: "DDFE"} 
} 
</script> 


5. 5 Polymer 的 区 别 

很 多 人 可 能 接触 Polymer 不 多 ， 它 是 在 2013 年 Google IO 之 后 推出 的 ， 提 出 了 Web 
Component 早期 的 很 多 规范 性 方案 ， 如 HTML Imports, Shadow DOM、 数 据 绑 定 等 。 不 过 ， 
于 后 续 的 新 版 本 对 之 前 的 神 击 比较 大 ， 也 一 度 受 到 早期 开发 者 的 抱怨 。 我 们 先 来 看 一 个 具体 的 
例子 ， 代 码 如 下 : 


<!-- 我 们 之 前 基于 co-http 的 全 局 封装 的 didi-http 模块 --> 
<link rel-"import" href-"../../components/core-ajax/core-ajax.html"» 


<polymer-element name="didi-http"> 
<template> 


<core-ajax id="ajax" 


auto 

url="{{ url }}" 
on-core-response="{{ onResponse }}" 
on-core-error="{{ onError }}" 


handleAs="json" 
withCredentials="true"> 
</core-ajax> 
</template> 
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«script» 
(function () { 
Polymer('didi-http', { 
publish: { 
urÉls 2{ 
value: '', 
reflect: false 
} 
}, 
type: {}, 
onResponse: function (e, data) { 
this.fire('success', data.response) ; 
), 
onError: function (data) { 
this.fire('error', data); 
} 
)); 
)0); 
«/script» 


</polymer-element> 


相同 点 : 
O 都 支持 数据 绑 定 。 


O 与 Vuejs 推崇 的 组 件 文件 
script 都 放 在 一 个 文件 里 


= 


o 


不 同 点 : 


都 是 以 .vue Jr: 282 


O Polymer 主要 推 Web Component 标准 


支持 就 需要 加 载 对 应 的 Polyfill。 


组 织 结构 类 似 , 在 Polymer ! 


也 是 把 template. 


:化 ， 所 以 会 依赖 浏览 器 环境 的 特性 支持 ， 如 果 不 


O Polymer 代码 体积 较 大 ， 无 法 做 到 轻 量 级 。 


6. 5 Backbone.js 的 区 别 


定位 不 同 ，Vue.js 专注 于 View, M Backbone 除了 View 之 外 ， 
bie, mi Backbone fi 


及 Router. Vue.js 拥有 数据 
7. 与 Riot 的 区 别 
作为 React-like 的 MVP 框架 的 代表 


， 在 Riot 的 官方 Git 


还 提供 了 Collection、Model 
事件 来 操作 DOM. 


要 手动 通过 


上 有 一 个 框架 大 小 比较 列表 ，Riot 


-A 
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以 不 到 10KB 的 大 小 稳 居 第 一 , 超越 第 二 的 Vue.js。 我 们 先 来 看 一 个 官方 的 timer 示例 , 代码 如 下 : 


«timer»«/timer» 


<script src-"timer.tag" type="riot/tag"></script> 


<script src="https://rawgit.com/riot/riot/master/riot%2Bcompiler.min.js"></script> 


«script» riot.mount('timer', 


<!-- timer.tag 内 容 --» 
«timer» 
«p»DDFE 4 Jt: 


«script» 
this.time - 
tick() { 

this.update(( time: 
} 
var timer = 
this.on('unmount', 
clearInterval (timer) 
} 
</script> 


</timer> 


相同 点 : 


API 设计 简单 而 专注 ， 


{ time }</p> 


opts.start || 


setInterval(this.tick, 


{ start: 0. :}) 


0 


++this.time }) 


function() { 


学 习 成 本 低 。 


«/script» 


1000) 


的 生命 周 


提供 自 定义 


BAT. Jf] 


与 主流 的 工 


开发 者 灵活 使 用 。 


具 集 成 度 比 较 高 ， 支 持 与 各 种 预 编 译 工具 集成 。 


Q 
Q 
Q 
Q 


Q 都 只 更 新 变化 了 的 元 素 。 


不 同 点 : 


O Riot 内 置 路 由 功能 、 设 计 支 持 Virtual DOM. 


O Riot 支持 自 定 义 标签 ， 


组 件 化 思想 ， 而 且 将 HTML A IS. CSS 混在 一 个 组 


将 标签 内 容 放 在 .tag 文件 中 ， 使 用 script 特殊 的 type="riot/tag" 来 
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加 载 编译 


Fo 


O All Polymer 的 初衷 一 样 ， 推 尝 Web Component 标准 化 ， 但 是 不 依赖 元 余 的 Polyfill。 


O Riot 文 持 服务 端 泻 染 ， 在 后 续 的 章节 中 我 们 也 会 介绍 Vue.js 2.0 LRR 


= 


O Riot 默认 单 向 绑 定 。 


1.2.2 如何 


地 来 实践 一 下 。 
安装 
(1) script 


ET od 


使 用 Vue.js 


过 对 比 一 些 比 较 熟知 的 框架 ， 了 解 了 Vue.js 支持 的 一 些 特性 和 优势 ， 下 面 简单 


如 果 项 目 直 


接 通过 script 加 载 CDN 文件 ， 代 码 示 例如 下 : 


<script src="http://webapp.didistatic.com/static/webapp/shield/z/vue/vue/1.0.24/vue. 


min.js"></scri 


(2) npm 


pt> 


如 果 项 目 基 


$ npm i vue -s 


(3) bower 


H 


里 依赖 ， 则 可 以 使 用 npm 来 安装 Vue， 执 行 如 下 命令 


于 npm 管 


ave-dev 


A 


如 果 项 目 基 


$ bower i vue 


2. 第 一 个 


F bower 管理 依赖 ， 则 可 以 使 用 bower 来 安装 Vue， 执 行 如 下 命令 


-—save-dev 


H 


Hello World 程序 


每 一 次 学 习 新 框架 ， 都 必 将 经 历 过 Hello World 程序 , 我 们 用 Vue.js 来 输出 一 个 微 信 内 滴 滴 
打车 的 WebApp 首页 Tab， 代 码 示例 如 下 : 


«div id-"didi 


«ul» 


-navigator"» 


<li v-for-"tab in tabs"» 


{{ tab.te 
</li> 


</ul> 


xt }} 


«/div» 


new Vu 
el: 
data 


todos: 


} 
} 


e({ 


'#didi-navigator', 


so 


textu 
tegt 
text: + 
texts 
text: 


[ 
text: ' 


1.2.8 Vue.js 的 发 展 历史 


Vue.js 正式 发 布 于 2014 年 2 月 ， 对 于 目前 的 Vuejs: 


Q 


在 开发 人 数 | 


O 在 受 关注 度 


WAP AR. Raat. ie 


测试 等 多 个 环节 。 


Vue.js 的 发 展 


O 2013 年 12 月 24 


Q 


Q 


Q 


Q 


Q 


201441 H 
2014 ££. 2 H 
2014 4E 3 H 
2015 年 10 H 27 


2016 年 4 月 


27 日 ， 
25 H, 


24 H, 


LE. Abus 70 多 贡献 者 。 
E, GitHub 拥有 20000 多 Star. 


i 件 化 、 组 件 化 ， 到 编辑 器 工具 、 浏 览 器 插件 等 ， 基 本 涵盖 了 从 开发 到 


， 发 布 0.7.0。 
发 布 0.8.0。 
发 布 0.9.0。 
发 布 0.10.0。 


， 正 式 发 布 1.0.0。 


27 日 ， 


发 布 2.0 的 preview 版 本 。 


前 推荐 使 用 比较 稳定 的 1.0.24 版 本 。 


第 之 x 
数据 绑 定 


数据 绑 定 是 将 数据 和 视图 相关 联 ， 当 数据 发 生变 化 时 ， 可 以 自动 更 新 视图 。 本 章 将 介绍 
Vue.js 中 数据 绑 定 的 语法 。 


2.1 W 
2.1.1 插值 


文本 插值 是 最 基本 的 形式 , 使 用 双 大 括号 {{ }} (类似 于 Mustache, 所 以 本 文中 称 作 Mustache 
标签 )， 代 码 示例 如 下 : 
<span>Text: {{text}}</span> 

例子 中 的 标签 {{text}} 将 会 被 相应 的 数据 对 象 text JR PERE Rt, L4 text 的 值 改变 时 , 文 
本 中 的 值 也 会 联动 地 发 生变 化 。 有 时 候 只 需 演 染 一 次 数据 ， 后 续 数 据 变化 不 再 关心 ， 可 以 通过 
“*” 实 现 ， 代 码 示例 如 下 : 
<span>Text: {{*text}} </span> 

双 大 括号 标签 会 把 里 面 的 值 全 部 当 作 字符 串 来 处 理 ， 如 果 值 是 HTML 片段 ， 则 可 以 使 用 三 
个 大 括号 来 绑 定 ， 代 码 示例 如 下 : 


<div>Logo: {{{logo}}}</div> 


logo : '<span>DDFE</span>' 
双 大 括号 标签 还 可 以 放 在 HTML 标签 内 ， 示 例如 下 ; 
«li data-id='{{id}}'></li> 


总 之 ，Vuejs 提供 了 一 系列 文本 泻 染 方式 ， 足 够 我 们 应 对 日 常 的 模板 泻 染 情况 。 需 要 尘 


FH 
eal 
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的 是 ，Vue 指令 和 自身 特性 内 是 不 可 以 插值 的 ， 如 果 用 错 了 地 方 ，Vuejs 会 发 出 警告 。 


2.1.2 ”表达 式 


Mustache 标签 也 接受 表达 式 形式 的 值 ， 表 达 式 可 由 JavaScript 表达 式 和 过 滤器 构成 。 过 滤 
器 可 以 没有 ， 也 可 以 有 多 个 。 


表达 式 是 各 种 数值 、 变 量 、 运 算 符 的 综合 体 。 简 单 的 表达 式 可 以 是 常量 或 者 变量 名 称 。 表 
达 式 的 值 是 其 运算 结果 ， 代 码 示例 如 下 : 


<!--JS 表达 式 --> 


{{ cents/100 }} // 在 原 值 的 基础 上 除 以 100 
{{ true? 1 : 0 }} // 值 为 真 ， 则 演 染 出 1， 否 则 泻 染 出 0 


{{ example.split(",") }} 


<!-- 无 效 示 例 --> 
((var logo = 'DDFE'}} // 这 是 语句 ， 不 是 表达 式 
{{if (true) return 'DDFE'}} // 条 件 控制 语句 是 不 支持 的 ， 可 以 使 用 三 元 式 
类 似 于 Linux 中 的 管道 ，Vuejjs 允许 在 表达 式 后 面 添 加 过 滤 符 ， 代 码 示例 如 下 : 
((example | toUpperCase) 
iX Hi toUpperCase 就 是 过 滤器 ， 其 本 质 是 一 个 JS 函数 ， 返 回 字符 串 的 全 大 写 形 式 。Vue.js 
允许 过 小 器 串联 ， 代 码 示例 如 下 : 
{{example | filterA | filterB}} 
过 滤器 还 支持 传 入 参数 ， 代 码 示 例如 下 : 
{{example | filter a b}} 


这 里 a 和 均 为 参数 、 用 空格 隔 开 。 


Vue.js 还 提供 了 许多 内 置 的 过 滤器 ， 第 6 草 将 对 此 进行 详细 介绍 。 


2.1.3 指令 


指令 是 带 有 v- 前 绥 的 特殊 特性 ， 其 值 限定 为 绑 定 表达 式 ， 也 就 是 JavaScript 表达 式 和 过 滤 
器 。 指 令 的 作用 是 当 表达 式 的 值 发 生变 化 时 ， 将 这 个 变化 也 反映 到 DOM 上 。 代 码 示例 如 下 : 
«div v-if="show">DDFE</div> 


当 show 为 true 时 ， 展 示 DDFE 字样 ， 否 则 不 展示 。 还 有 一 些 指令 的 语法 稍 有 不 同 ， 在 指 
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令 和 表达 式 之 间 插 入 一 个 参数 ， 用 冒号 分 隔 ， 如 v-bind 指令 。 代 码 示例 如 下 : 
«a v-bind:href="url"></a> 
«div v-bind:click="action"></div> 
22 ”分 隔 符 
Vue.js 中 数据 绑 定 的 语法 被 设计 为 可 配置 的 。 如 果 不 习惯 Mustache 风格 的 语法 ， 则 可 以 自 


己 设 置 


o 


我 们 可 以 在 Vue.config 中 配置 绑 定 的 语法 。Vue.config 是 一 个 对 象 , 包含 了 Vuejs 的 所 有 全 


局 配置 ， 可 以 在 Vue 实例 化 前 修改 其 中 的 属性 。 分 隔 符 在 Vue.config 中 源码 定义 如 下 : 


<1-- 源 码 


let delimiters = 


X src/config.js--» 
[Tite EEN 


let unsafeDelimiters = ['{{{', 


1. delimiters 


Vue.config.delimiters - 


如 果 修 改 了 默认 的 文本 插值 的 


<%example%>. 


2. unsafeDelimiters 


Vue.config.unsafeDelimiters = ["«$", 


如 果 修 改 了 默认 的 HTML 插值 的 分 隔 符 ， 


<Semample$>. 


CEERU 


则 文本 插值 的 语法 


| {fexample}} 4 为 


"$»"] 


则 HTML dift f] i834: d (( (example) 1) 4E 2j 


指令 (Directive) 是 特殊 的 带 有 前 绥 v- 的 特性 。 指 令 的 值 限 定 为 绑 定 表达 式 ， 指 令 的 职责 
就 是 当 其 表达 式 的 值 改 变 时 把 某 些 特殊 的 行为 应 用 到 DOM Eo 


3.1 ”内 部 指令 


当先 来 看 看 和 原生 HTML 标签 相似 的 一 组 内 置 指令 ， 这 组 指令 非常 容易 记忆 ， 因 为 仅仅 是 
在 原生 标签 前 面 加 上 了 v- 前 级 ， 如 图 3-1 所 示 。 —À TE 
3.1.1 v-if taen) E 

Vv-if 指 令 可 以 完全 根据 表达 式 的 值 在 DOM 中 — (etm = 
生成 或 移 除 一 个 元 素 。 如 果 v-if 表达 式 赋值 为 

v-for(1.0+) = v-pre 
false， 那 么 对 应 的 元 素 就 会 从 DOM 中 移 除 ， 否 
则 ， 对 应 元 素 的 一 个 克隆 将 被 重新 插入 DOM 中 。 m — 
代码 示例 如 下 : a LL 


<body class-"native"» 图 3-1 内 部 指令 
<div id="example"> 
<p v-if=greeting”>Hello</p> 
</div> 
</body> 
<script> 
var exampleVM2 = new Vue({ 
el: '#example', 


data: { 
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greeting: false 
} 


} 
</script> 


效果 如 图 3-2 所 示 。 图 3-2 v-if 


因为 v- 这 是 一 个 指令 ， 需 要 将 它 添 加 到 一 个 元 素 上 。 但 是 如 果 想 切换 多 个 元 素 ， 则 可 以 把 
<template> 元 素 当 作 包 装 元 素 , 并 在 其 上 使 用 v- 记 最终 的 泻 染 结果 不 会 包含 它 。 代 码 示例 如 下 : 


«template v-if-"ok"» 


"></div> 


id-"example"» 


«hl»Titlec/hl» s 
1>Title</hi> 


<p>Paragraph 1</p> 


uo 


<p>Paragraph 2</p> 
</template> 


效果 如 图 3-3 所 示 。 


3.1.2 v-show 


v-show 指令 是 根据 表达 式 的 值 来 显示 或 者 隐藏 HTML 7038. 74 v-show 赋值 为 false 
时 ， 元 素 将 被 隐藏 。 查 看 DOM 时 ， 会 发 现 元 素 上 多 了 一 个 内 联 样 式 style="display: 
none"。 代 码 示例 如 下 : 


<body> 


<input type="text" v-model="message" placeholder="edit me"><body class="native"> 
<div id="example"> 
<p v-show="greeting">Hello!</p> 
</div> 
</body> 
<script> 
var exampleVM2 = new Vue({ 


el: '#example', 


data: { 


ype="text" v-model="message" placeholder="edit me"» 
Y «div id="example"> 
) "display: none;">Hello!</p> 


greeting: false 
} 
} 


</script> </body> 


效果 如 图 3-4 所 示 。 图 3-4 v-show 


iE: v-show 不 支持 <template> 语 法 。 


在 切换 v- 让 模块 时 ，Vue.js 有 一 个 大 


局 部 编译 / 撮 载 过 程 ， 
天 


为 v-if ! 


的 模板 可 能 包括 数据 绑 


定 或 子 组 件 。v- 计 是 真实 的 条 件 泻 染 ， 
内 的 事件 监听 器 和 子 组 件 。 


局 部 编译 (编译 会 被 缓存 起 来 )。 


相 比 之 下 ，v-show 简单 得 多 一 一 元 素 始 终 被 编译 并 保留 ， 只 是 


AS 


入 


为 它 会 确保 条 件 块 在 切换 时 合适 地 销毁 与 重建 条 件 块 


v- 让 是 惰性 的 一 一 如 果 初 始 泻 染 时 条 件 为 假 , 则 什么 也 不 做 , 在 条 件 第 一 次 变 为 真 时 才 开 始 


单 地 基于 CSS 切换 。 


一 般 来 说 ，v- 直 有 更 高 的 切换 消耗 ， 而 v-show 有 更 高 的 初始 泻 染 消耗 。 因 此 ， 如 果 需 要 频 


繁 地 切换 ， 则 使 


3.1.3 v-else 


顾 名 
代码 示例 如 下 : 


<body class="native"> 


ab 
HE o 


<div id="example"> 
<p Vv-if="ok"> 我 是 对 的 《/p> 
«p Vv-else="ok"> 我 是 错 的 </p> 
</div> 
</body> 
<script> 
var exampleVM2 = new Vue({ 
el: '#example', 
data: { 
ok: 
} 
} 


</script> 


将 v-show 用 在 组 件 
例如 下 : 


«custom-component v-show="condition"></custom-component> 
«p v-else> 这 可 能 也 是 一 个 组 件 </P> 


false 


] v-show 较 好 ， 如 果 在 运行 时 条 件 不 大 可 能 改变 ， 则 使 用 v-if BEEF. 


思 义 ，v-else 就 是 JavaScript 中 else 的 意思 ， 它 必须 跟着 v-if BK v-show, 75:254 else I 


FE 时 ， 因 为 指令 的 优先 级 v-else 会 出 现 问 题 ， 所 以 不 要 这 样 做 。 代 码 示 
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我 们 可 以 用 另 一 个 v-show 替换 v-else， 代 码 示 例如 下 : 


<custom-component v-show="condition"></custom-component> 


«p v-show="lcondition"> 这 可 能 也 是 一 个 组 件 </p> 


3.1.4 v—model 


v-model 指令 用 来 在 input. select. text. checkbox. radio 等 表单 控件 元 素 上 创建 双向 数据 
绑 定 。 根 据 控件 类 型 v-model 自动 选取 正确 的 方法 更 新 元 素 。 尽 管 有 点 神奇 ， 但 是 v-model 不 
过 是 语法 糖 ， 在 用 户 输入 事件 中 更 新 数据 ， 以 及 特别 处 理 一 些 极端 例子 。 代 码 示例 如 下 : 


<body id="example"> 


<form> 
姓名 : 
<input type="text" v-model="data.name" placeholder=""> 
</br/> 
性 别 : 
<input type="radio" id-"one" value-"One" v-model="data.sex"> 
«label for="man"> 男 </label> 
<input type="radio" id="two" value-"Two" v-model="data.sex"> 
«label for="male">&</label> 


</br/> 

兴趣 : 

<input type="checkbox" id="jack" value="book" v-model="data.interest"> 
«label for="jack">[di¥</label> 

<input type="checkbox" id-"john" value="swim" v-model="data.interest"> 
«label for="john">¥fik</label> 

<input type="checkbox" id="mike" value="game" v-model="data.interest"> 
«label for="mike"> 游 戏 </label> 

<input type="checkbox" id="mike" value="song" v-model="data.interest"> 
«label for="mike"> 唱 歌 </label> 

<br> 

身份 : 

<select v-model="data.identity"> 


<option value="teacher" selected> 教 师 </option> 


«option value="doctor" > 医生 </option> 


币 </option> 


«option value-"lawyer" > 得 
</select> 
</form> 
</body> 
<script> 


new Vue ({ 
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el: '#example', 
data: { 
data:í 
name:"", 姓名 : 
sex:"" TERI: 5 ex ES aai am 
interest: []， An "uil uds p pa 
identity:'' data 
} { 
} Paar hee 
}) nd LN 
«/script» } 
效果 如 图 3-5 所 示 。 图 3-5 v-model 
除了 以 上 用 法 ， 在 v-model 指令 后 面 还 可 以 添加 多 个 参数 (number、lazy、debounce)。 
1. number 
如 果 想 将 用 户 的 输入 自动 转换 为 Number 类 型 (如 果 原 值 的 转换 结果 为 NaN, 则 返回 原 值 )， 
则 可 以 添加 一 个 number 特性 。 
2. lazy 
在 默认 情况 下 ，v-model 在 input 事件 中 同步 输入 框 的 值 与 数据 ， 我们 可 以 添加 一 个 lazy 特 


性 ， 从 而 将 数据 改 到 在 change 事件 中 发 生 。 代 码 示 例如 下 : 


<body id="example"> 
<input v-model="msg" lazy>< 
{ {msg} } 

</body> 

<script> 


var exampleVM2 = new Vue ({ 


br/> 


el: '#example', 

data: { 

msg: ' 内 容 是 在 change 事件 后 才 改 变 的 ~' 

} 

} 

</script> 

我 们 在 input 输入 框 中 输入 “依然 没 变 ” 虽然 触发 了 SH i aan” 
input 事件 ， 但 是 因为 加 入 了 lazy BYE, msg 的 值 一 直 没 有 容 是 在 chanes ES 
发 生变 化 。 效 果 如 图 3-6 所 示 。 图 3-6 lazy 
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3. debounce 

设置 一 个 最 小 的 延 时 ， 在 每 次 敲 击 之 后 延 时 同步 输入 框 的 值 与 数据 。 如 果 每 次 更 新 都 要 进 
行 高 耗 操作 〔 例 如， 在 input 中 输入 内 容 时 要 随时 发 送 AJAX 请 求 )， 那 么 它 较 为 有 用 。 代 码 示 
例如 下 : 


<body id="example"> 


<input v-model="msg" debounce="5000"><br/> 
{ {msg}} 
</body> 
<script> 
var exampleVM2 = new Vue({ 
el: '#example', 
data: { 
msg: ' 内 容 是 在 5000ms 后 才 改变 的 ~， 
} 
} 


</script> 
在 5000ms 内 我 们 将 输入 框 的 内 容 清空 ，msg 的 值 没 有 马上 改变 ， 还 依然 保持 着 “内 容 是 在 
5000ms 后 才 改 变 的 ~” 效果 如 图 3-7 所 示 。 


5000ms 后 内 容 才 被 清空 ， 效 果 如 图 3-8 所 示 。 


内 容 是 在 5000ms 后 才 改 变 的 


图 3-7 5000ms 内 效果 图 3-8 ”5000ms 后 效果 


3.1.5 v-repeat 


我 们 可 以 使 用 v-repeat 指令 基于 源 数 据 重复 演 染 元 素 。 对 于 数组 中 的 每 一 个 对 象 ， 该 指令 
都 会 创建 一 个 子 Vue 实例 。 这 些 子 实例 继承 父 类 的 所 有 数据 ， 所 以 在 重复 的 元 素 中 ， 我 们 可 以 
访问 重复 实例 和 父 实例 的 属性 。 此 外 ， 我 们 也 可 以 使 用 $index 来 呈现 相对 应 的 数组 索引 。 代 码 
示例 如 下 : 


<body id-"example"» 
<ul id="demo"> 
<li v-repeat-"items" class="item-{ {Sindex}}"> 


{{Sindex}} - {{parentMsg}} {{childMsg}} 


</li> 
</ul> 
</body> 
<script> 
var demo = new Vue({ 
el: '#demo', 
data: { 
parentMsg: ' 滴 滴 '， 
items: [ 
{ childMsg: ' 顺 风车 ' }, 
{ childMsg: ' 专 车 ' } 


} 
} 


</script> 


效果 如 图 3-9 所 示 。 
有 时 我 们 可 能 想 重 复 一 个 包含 多 个 DOM 元 素 的 块 ， 在 这 利 


0 - 滴 滴 顺风 车 
1 - 滴 滴 专车 


图 3-9 v-repeat 


标签 来 包装 重复 片段 。 这 里 的 <template> 标 签 只 充当 一 个 语义 包装 器 。 代 码 示 例如 下 : 


<ul> 
«template v-repeat-"list"» 
«li»((msg))«/li» 
<li class-"divider"»«/li» 
«/template» 


«/ul» 


对 于 含有 原始 值 的 数组 ， 我 们 可 以 简单 地 通过 $value 来 获取 值 。 代 码 示例 如 下 : 


<body id="example"> 


<ul id="tags"> 
<li v-repeat="tags"> 
{ {$value} } 
</li> 
</ul> 
</body> 
<script> 
var demo = new Vue({ 
el: '‘#tags', 
data: { 


情况 下 ， 则 可 以 使 用 <template> 
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tags: ['JavaScript', 'MVVM', 'Vue.js'] 
} 
e JavaScript 
)) . KVVK 
</script> e Vue. js 
效果 如 图 3-10 所 示 。 3-10 $value 


有 时 我 们 更 希望 显 式 地 访问 变量 ， 而 不 是 隐 式 地 回 退 到 父 作用 域 ， 这 时 可 以 通过 使 用 别名 
的 方式 实现 : 
v-repeat="item in items" 


注 : Vue.js 0.12.8 及 以 后 版 本 支持 in 分隔 符 。 


当 数 组 数据 出 现 变动 时 如 何 检测 呢 ? Vue.js 包装 了 被 观察 数组 的 变异 方法 ， 它 们 能 触发 视 
图 更 新 。 被 包装 的 方法 有 : 


O push() 
O popO 
O shift() 
O unshift() 
Q splice() 
OQ sort() 

O reverse() 


源码 定义 如 下 : 


<1-- 源 码 目 录 : vue/src/observer/array.js 10 行 --> 
;7[ 
'push', 


'pop', 

'shift', 

'unshift'; 

'splice', 

'sort.’;, 

‘reverse! 
] 


.forEach(function (method) { 


// cache original method 
var original = arrayProto[method] 
def(arrayMethods, method, function mutator () 
// avoid leaking arguments: 
// http://jsperf.com/closure-with-arguments 
var i = arguments.length 
var args - new Array(i) 
while (i--) { 
args[i] = arguments[i] 
} 
var result = original.apply(this, args) 
var ob = this. ob __ 
var inserted 
switch (method) { 
case 'push': 
inserted - args 
break 
case 'unshift': 
inserted - args 
break 
case 'splice': 
inserted = args.slice(2) 
break 
} 
if (inserted) ob.observeArray (inserted) 
// notify change 
ob.dep.notify() 


return result 


lxi 
Tun 


如 源码 所 示 ，Vuejs 


E 写 这 些 方法 之 后 ， 触 发 了 一 次 notify- 


Vue.js 还 增加 了 两 个 方法 来 观测 变化 : $set、$remove。 源 码 定 义 如 下 : 


<!1-- 源 码 目录 : vue\src\observer\array.js 60 行 --> 


def ( 
arrayProto, 
'$set', 
function $set (index, val) { 
if (index >= this.length) ( 
this.length = Number(index) + 1 
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} 


return this.splice(index, 1, val)[0] 


) 
def( 
arrayProto, 
'$remove', 
function $remove (item) { 
/* istanbul ignore if */ 
if (!this.length) return 
var index - indexOf(this, item) 
if (index > -1) { 


return this.splice(index, 1) 


我 们 应 该 尽量 避免 直接 设置 数据 绑 定 的 数组 元 素 ， 因 为 这 些 变化 不 会 被 Vue,js 检测 到 ， 
而 也 不 会 更 新 视图 泻 染 。 这 时 ， 我 们 可 以 使 用 $set 方法 : 


// same as ^demo.items[0] = ...^ but triggers view update 


demo.items.$set(0, ( childMsg: 'Changed!']) 
$remove 是 $splice 的 语法 糖 ， 用 于 从 目标 数组 中 查找 并 删除 元 素 。 因 此 ， 不 必 这 样 : 


<span v-text="msg"></span><br/> 


<!-- same as --> 


<span>{ {msg}}</span> 
只 用 这 样 : 


// remove the item at index 0 


demo.items.S$remove(0) 


另外 ， 也 可 以 使 用 filter. concat. slice 方法 ， 返 回 的 数组 将 是 一 个 不 同 的 实例 。 我 们 可 以 
用 新 的 数组 奉 换 原来 的 数组 。 


demo.items = demo.items.filter(function (item) { 


return item.childMsg.match(/Hello/) 
} 


在 某 些 情况 下 ， 我 们 有 时 可 能 需要 用 全 新 对 象 〈 例 如 ， 通 过 API 调用 创建 的 对 象 ) 来 替换 
数组 。 因 为 在 默认 情况 下 ，v-repeat 通过 数据 对 象 的 特征 来 决定 对 已 有 作用 域 和 DOM 元 素 的 复 
用 程度 ， 这 可 能 导致 重新 泻 染 整个 列表 。 但 是 ， 如 果 每 个 对 象 都 有 一 个 唯一 的 ID 属性 ， 便 可 以 
使 用 track-by 特性 给 Vue.js 一 个 提示 ， 因 而 Vue.js 能 尽 可 能 地 复 用 已 有 实例 。 假 定数 据 为 : 
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items: [ 
{ uid: '88f869d', ... }, 
{ uid: '7496c10', ... } 


可 以 这 样 给 出 提示 ， 代 码 示例 如 下 : 


<div v-repeat ="item in items" track-by=" uid"> 
<!-- content --> 


</div> 
ERRAZ items 时 ， 如 果 Vue.js 遇 到 一 个 包含 有 _uid: '88f869d' 的 新 对 象 ， 那 么 它 知 道 可 
以 复 用 这 个 已 有 对 象 的 作用 域 与 DOM 元 素 。 


如 果 没 有 唯一 的 键 供 追 踪 ， 则 可 以 使 用 track-by="$index"， 它 强制 让 v-for 进入 原 位 更 新 模 
X: 片段 不 会 被 移动 ， 而 是 简单 地 以 对 应 索引 的 新 值 刷新 。 这 种 模式 也 能 处 理 数 据 数 组 中 重复 
的 值 。 
这 让 数据 奉 换 非常 高 效 ， 但 是 也 会 付出 一 定 的 代价 。 因 为 这 时 DOM 节点 不 再 映射 数组 元 
素 顺 序 的 改变 ， 不 能 同步 临时 状态 〈 比 如 <input> 元 素 的 值 )， 以 及 组 件 的 私有 状态 。 因 此 ， 如 
IR v-repeat 块 包含 <input> 元 素 或 子 组 件 ， 则 要 小 心 使 用 track-by="$index"。 


ALA JavaScript 的 限制 ，Vue.js 不 能 检测 到 下 面 数组 的 变化 : 


O 直接 用 索引 设置 元 素 ， 如 vm.items[0]= (}. 


O 修改 数据 的 长 度 ， 如 vm.items.length = 0. 


为 了 解决 前 一 个 问题 ，Vuejs 扩展 了 观察 数组 ， 我 们 可 以 使 用 上 面 讲 过 的 $set 方法 : 


// 4 ^examplel.items[0] = ... ”相同 但 是 能 触发 视图 更 新 
vm.items.$set(0, { childMsg: 'Changed!']) 


至 于 后 一 个 问题 ， 只 需 用 一 个 空 数组 替换 items 即 可 。 


我 们 也 可 以 使 用 v-repeat 遍历 一 个 对 象 ， 每 一 个 重复 的 实例 都 将 有 一 个 特殊 的 属性 $key， 
对 于 原始 值 ， 我 们 可 以 使 用 $value 来 获取 。 代 码 示例 如 下 : 


<body id="example"> 


<ul id="repeat-object"> 
<li v-repeat="primitiveValues">{{$key}} : {{$value}}</1i> 


<li>===</li> 
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<li v-repeat-"objectValues"»(($key]) 
«/ul» 
«/body» 
«script» 
var demo = new Vue({ 
el: '#repeat-object', 
data: { 
primitiveValues: { 
FirstName: 'DIDI', 
LastName: 'FE', 
Age: 4 
), 
objectValues: { 
one: 4 


msg: 'Hello' 


msg: 'DIDI FE' 


«/script» 


效果 如 图 3-11 所 示 。 


: {{msg}}</1i> 


FirstName : DIDI 
LastName : FE 
Age : 4 

one : Hello 

two : DIDI FE 


ik: ECMAScript 5 无 法 检测 到 新 属性 添加 到 一 个 对 象 上 或 者 在 对 象 中 ; 
况 ，Vue.js 增加 了 三 种 方法 : S$add(key, value), $set(key, value) 和 $delete(key)， 这 些 方法 可 以 用 


来 添加 和 删除 属性 ， 同 时 触发 视图 更 新 。 


v-repeat 也 文 持 整数 。 代 码 示例 如 下 : 


<div id="range"> 
<div v-repeat="val">Hi! 


</div> 


将 模板 重复 整数 次 ， 效 果 如 图 3-12 所 示 。 


也 可 以 将 元 素 重 复 整数 次 ， 代 码 示例 如 下 : 


<span v-repeat="n in 10">{{n}}</span> 


效果 如 图 3-13 所 示 。 


{$index}}</div> 


图 3-11 ”遍历 对 象 


措 除 。 要 处 理 这 种 情 
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Hi! 
Hi! 
Hi! 
Hi! 
Hi! 


图 


3-12 


v-repeat 同时 还 可 以 和 Vue.js 提供 的 内 置 过 滤器 或 提 


1. filterBy ( 0.12 版 本 ) 


<input v-model="searchText"> 


<ul> 


<li v-repeat="user in users | filterBy searchText in 


</ul> 
数据 如 下 : 


[ 


users: 
{ 


name: ! 快 车 ' ， 


tag:'1' 

), 

{ 
name:' 出 租车 '， 
tA 2 

), 

{ 
name: ' 顺 风车 '， 
tagi taI 

), 

{ 
name:' 专 车 '， 
tag:'4' 


在 <ul> 标 签 中 展示 了 滴 滴 业 务 类 型 ， 在 输入 村 
“快车 ”在 users 的 name 字段 中 过 滤 出 我 人 


filterBy searchKey [in dataKey...] 


门 需要 的 信 ， 


0123456789 


图 3-13 ”整数 


序数 据 一 起 使 ) 


自 


并 展示 出 来 。 效 果 如 


"name'">{{user.name}}</1li> 


Dy? 


图 3-14 所 示 。 


EE 中 输入 “快车 ，<ul> 中 数据 会 根据 所 输入 的 
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快车 
。 快 车 。 快车 
。 出 租车 
。 顺风 车 
。 专车 
输入 快车 后 
图 3-14 filterBy 


2. orderBy ( 0.12 版 本 ) 


语法 : orderBy sortKey [reverseKey] 


用 法 : 


<body id="example"> 
<ul> 
<li v-repeat-"user in users | orderBy field reverse">{{user.name}}</li> 
«/ul» 
</body> 
<script> 
var demo = new Vue({ 
el: '#example', 
data: { 
field: 'tag', 
reverse: false, 


users: [ 


tf Fe 


, 


tag: 1 


name: ! 出 租车 ' ， 


} 
} 


«/script» E Ree 
ang Sis Bios = 。 顺 风车 
在 <ul> 标 签 中 根据 field 变量 代表 的 tag 字段 。 出 租车 
正 序 排列 数据 ， 效 果 如 图 3-15 所 示 。 图 3-15 orderBy 
3.1.6 v-for 


我 们 可 以 使 用 v-for 指令 基于 源 数据 重复 演 染 元 素 。 我 们 也 可 以 使 用 $index 来 呈现 相对 应 的 
数组 索引 ， 代 码 示例 如 下 : 


<body id-"example"» 


«ul id="demo"> 


<li v-for-"item 


in items" class="item-{{Sindex}}" class="item-{{Sindex}}"> 


{{Sindex}} -{{parentMessage}} {{item.msg}}} 


</li> 
</ul> 
</body> 


<script> 


var demo = new Vue ({ 


el: '#demo', 
parentMessage: 
data: { 


items: [ 


' 滴 滴 '， 


{ msg: ' 滴 滴 顺 风车 ' }， 
( msg: ' 滴 滴 专 车 ' } 


} 
} 


</script> 


。0 - 18:8 顺风 车 


1 - Ñ 


效果 如 图 3-16 所 示 。 图 3-16  v-for 


v-for 需要 特殊 的 别名 ， 形 式 为 “item in items" Citems 是 数据 数组 ，item 是 当前 数组 元 素 的 


别名 )。v-for ÆH 


F 始 时 对 传 入 的 表达 式 做 了 语法 分 析 ， 不 是 “item in / ofitems” 的 形式 ， 将 给 出 


警告 信息 。Vue.js 1.0.17 及 以 后 版 本 支持 of 分 隅 符 ， 更 接近 JavaScript 遍历 器 语法 ， 用 法 如 下 : 


<div v-for="item of items"></div>。 
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源码 定义 如 下 : 


<!-- 源 码 目录 : vue\src\directive\public\for.js 37 行 --> 


// support "item in/of items" syntax 
var inMatch = this.expression.match(/(.*) (?:inlof) (.*)/) 
if (inMatch) { 
var itMatch = inMatch[1].match(/\((.*),(.*)\)/) 
if (itMatch) { 
this.iterator = itMatch[1].trim() 
this.alias - itMatch[2].trim() 
b else i 
this.alias = inMatch[1].trim() 
} 


this.expression = inMatch[2] 


if (!this.alias) { 
process.env.NODE ENV !== 'production' && warn ( 
‘Invalid v-for expression "' + this.descriptor.raw + '": ' + 
‘alias is required.', 
this.vm 
) 


return 


i£: Vue.js 0.12.8 及 以 后 版 本 支持 记分 隔 符 。 


使 用 v-for， 将 得 到 一 个 特殊 的 作用 域 ， 类 似 于 AngularJS 的 隔离 作用 域 ， 我 们 需要 明确 指定 
性 传递 数据 , 否则 在 组 件 内 将 获取 不 到 数据 。 对 于 组 件 内 的 <p> 标 签 , 我 们 可 以 使 用 <slot>: 


«my-item v-for-"item in items" :item-"item" :index="Sindex"> 


props 属 


<p>{{item.text}}</p> 


</my-item> 
当 数 组 数据 出 现 变 动 时 如 何 检测 呢 ? Vue.js 包装 了 被 观察 数组 的 变异 方法 ， 它 们 能 触发 视 
图 更 新 。 被 包装 的 方法 有 : 


T 


O push() 
O popO 


O shit) 


O unshifi() 
O splice() 

O sort) 

O reverse() 
源码 定义 如 下 : 


<!1-- 源 码 目录 : vue/src/observer/array.js 10 行 --> 
;7[ 
'push', 


'pop', 
'shift', 
'unshift', 
'splice', 
'sort', 
'reverse' 
] 
.forEach (function (method) { 
// cache original method 
var original = arrayProto[method] 
def(arrayMethods, method, function mutator () 
// avoid leaking arguments: 
// http://jsperf.com/closure-with-arguments 
var i = arguments.length 
var args - new Array(i) 
while (i--) { 
args[i] = arguments[i] 
} 
var result = original.apply(this, args) 
var ob = this. ob __ 
var inserted 
switch (method) { 
case 'push': 
inserted - args 
break 
case 'unshift': 
inserted - args 
break 


case 'splice': 
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inserted = args.slice (2) 
break 


} 
if (inserted) ob.observeArray (inserted) 


// notify change 
ob.dep.notify() 


return result 


Etjxue AT Ju. f IX notify. 


lili 


如 源码 所 示 ，Vue.js 
Vue.js 还 增加 了 两 个 方法 来 观测 变化 : $set、$remove。 源 码 定 义 如 下 : 


<!1-- 源 码 目录 : vue\src\observer\array.js 60 行 --> 


def( 
arrayProto, 
'$set', 
function $set (index, val) { 
if (index >= this.length) ( 
this.length = Number(index) + 1 


} 
return this.splice(index, 1, val) [0] 


) 
def ( 
arrayProto, 
"Sremove', 
function $remove (item) { 
/* istanbul ignore if */ 
if (!this.length) return 
var index = indexOf (this, item) 
if (index > -1) { 


return this.splice(index, 1) 


T 


而 也 不 会 更 新 视图 泻 染 。 这 时 ， 我 们 可 以 使 用 $set 方法 : 


// same as ^demo.items[0] = ...^ but triggers view update 


我 们 应 该 尽量 避免 直接 设置 数据 绑 定 的 数组 元 素 ， 因 为 这 些 变 化 不 会 被 Vue.js 检测 至 


demo.items.$set(0, { childMsg: 'Changed!']) 
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$remove 是 $splice 的 语法 糖 ， 用 于 从 目标 数组 中 查找 并 删除 元 素 。 因 此 ， 不 必 这 样 : 


<span v-text="msg"></span><br/> 


<!-- same as --> 


<span>{ {msg}}</span> 
只 用 这 样 : 


// remove the item at index 0 


demo.items.$remove (0) 


另外 ， 也 可 以 使 用 filter, concat. slice 方法 ， 返 回 的 数组 将 是 一 个 不 同 的 实例 。 我 们 可 以 
用 新 的 数组 蔡 换 原来 的 数组 。 


demo.items = demo.items.filter(function (item) { 


return item.childMsg.match(/Hello/) 
}) 


在 某 些 情况 下 ， 我 们 有 时 可 能 需要 用 全 新 对 象 〈 例 如 ， 通 过 API 调用 创建 的 对 象 ) OR BH 
数组 。 因 为 在 默认 情况 下 ，v-for 通过 数据 对 象 的 特征 来 决定 对 已 有 作用 域 和 DOM 元 素 的 复 用 
FREE, 这 可 能 导致 重新 泻 染 整 个 列表 。 但是， 如 果 每 个 对 象 都 有 一 个 唯一 的 ID 属性 , 便 可 以 使 
用 track-by 特性 给 Vuejs 一 个 提示 ， 因 而 Vue.js 能 尽 可 能 地 复 用 已 有 实例 。 假 定数 据 为 : 


( uid: '88f869d', ... }, 
{ uid: '7496c10', ... } 


可 以 这 样 给 出 提示 ， 代 码 示例 如 下 : 


<div v-for ="item in items" track-by-" uid"» 


<!-- content --> 


</div> 
在 奉 换 数组 items 时 ， 如 果 Vue.js 遇 到 一 个 包含 有 _uid: '88f869d' 的 新 对 象 ， 那 么 它 知道 可 
以 复 用 这 个 已 有 对 象 的 作用 域 与 DOM 元 素 。 


守 ， 则 可 以 使 用 track-by="$index"， 它 强制 让 v-for 进入 原 位 更 新 模 
简单 地 以 对 应 索引 的 新 值 刷 新 。 这 种 模式 也 能 处 理 数据 数组 中 重复 


Tu REG WE m gb paa 
AX: 片段 不 会 被 移动 ， 而 是 
的 值 。 


这 让 数据 替换 非常 高 效 ， 但 是 也 会 付出 一 定 的 代价 。 因 为 这 时 DOM 节点 不 再 映射 数组 元 
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素 顺 序 的 改变 ， 不 能 同步 临时 状态 〈 比 如 <input> 元 素 的 值 )， 以 及 组 件 的 私有 状态 。 因 此 ， 如 
R v-for 块 包含 <inpu 人 > 元 素 或 子 组 件 ， 则 要 小 心 使 用 track-by="$index"。 


>H 


为 JavaScript 的 限制 ，Vue.js 不 能 检测 到 下 面 数组 的 变化 ; 


O 直接 用 索引 设置 元 素 ， 如 vm.items[0] = 1j. 


O 修改 数据 的 长 度 ， 如 vm.items.length = 0. 


看 讲 过 的 $set 方法 : 


为 了 解决 前 一 个 问题 ，Vuejs 扩展 了 观察 数组 ， 我 们 可 以 使 用 上 


// 与 ^examplel.items[0] = ...^ 相同， 但 是 能 触发 视图 更 新 
vm.items.$set(0, { childMsg: 'Changed!']) 


至 于 后 一 个 问题 ， 只 需 用 一 个 空 数组 奉 换 items 即 可 。 


有 时 我 们 可 能 想 重复 一 个 包含 多 个 DOM 元 素 的 块 ,在 这 种 情况 下 ， 则 可 以 使 用 <template> 
标签 来 包装 重复 片段 。 这 里 的 <template> 标 签 只 充当 一 个 语义 包装 器 。 代 码 示 例如 下 : 


<ul> 


«template v-for="list in lists"> 
«li»((list.msg))«/li» 

<li class-"divider"»«/li» 
«/template» 


«/ul» 
我 们 也 可 以 使 用 v-for 遍历 一 个 对 象 ， 每 一 个 重复 的 实例 都 将 有 一 个 特殊 的 属性 $key， 或 者 
给 对 象 的 键 值 提供 一 个 别名 。 代 码 示例 如 下 : 


<body id="example"> 


<ul id="repeat-object"> 
<li v-for ="value in primitiveValues">{{Skey}} : {{value}}</li> 
<1i>===</1i> 
«li v-for="(key, item )in objectValues">{{key}} : {{item.msg}}</li> 
«/ul» 
</body> 
<script> 
var demo = new Vue({ 
el: '#repeat-object', 
data: { 
primitiveValues: { 
FirstName: 'DIDI', 
LastName: 'FE', 
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Age: 4 
), 
objectValues: { 
one: 1 
msg: 'Hello' 
), 
two: { 
msg: 'DIDI FE' 
} e FirstName : DIDI 
} e LastName : FE 
| ech 
}) e one : Hello 
</script> e two : DIDI FE 


效果 如 图 3-17 所 示 。 


ik: ECMAScript 5 无 法 检测 到 新 属性 添加 到 一 个 对 象 上 或 者 在 对 象 中 ] 


图 3-17 ”遍历 对 和 象 


提 除 。 要 处 理 这 种 情 


JL, Vuejs 增加 了 三 种 方法 : $add(key,value)、$set(key, value) 和 $delete(key)， 这 些 方法 可 以 用 来 
添加 和 删除 属性 ， 同 时 触发 视图 更 新 。 


<div v-for-"n in 10">Hi! 


v-for 也 支持 整数 。 代 码 示例 如 下 : 


<div id="range"> 


«/div» 


将 模板 重复 整数 次 ， 效 果 如 图 3-18 所 示 。 


v-for 同时 还 可 以 和 Vue.js 提供 的 内 置 过 滤器 或 排序 数据 一 起 使 用 。 


1. filterBy (0.12 版 本 ) 


Sindex}}</div> 


Hi! 
Hi! 
Hi! 
Hi! 
Hi! 


PWN OS 


图 3-18 


lili 
map 


复 模 板 


语法 : filterBy searchKey [in dataKey...] 
用 法 : 
<input v-model="searchText"> 
«ul» 
<li v-for-"user in users | filterBy searchText in 'name'">{{user.name}}</1li> 
«/ul» 
MAS 
数据 如 下 : 


users: [ 


{ 


36 ”Vue.js 权威 指南 


name: ! 快 车 ' ， 


下 二 全 

r 
name: ' 出 租车 '， 
tag:'2' 


在 <ul> 标 签 中 展示 了 滴 滴 业 务 类 型 ， 在 输入 框 中 输入 “快车 ，<ul> 中 数据 会 根据 所 输入 的 


“快车 ” 在 users 的 name 字段 中 过 滤 出 我 们 需要 的 信息 ， 并 展示 出 来 。 效 果 如 图 3-19 所 示 。 
快车 
。 快车 。 快车 
。 出 租车 
。 顺风 车 
。 专 车 
输入 快车 后 
图 3-19 filterBy 
2. orderBy (0.12 版 本 ) 
语法 : orderBy sortKey [reverseKey] 
用 法 : 
<body id="example"> 
<ul> 
<li v-for-"user in users | orderBy field reverse">{{user.name}}</li> 
«/ul» 
«/body» 
«script» 


var demo = new Vue(í 
el: '#example', 
data: { 
field: 'tag', 
reverse: false, 
users: [ 


{ 


name: '#R7E', 


tag: 1 
name: ' 出 租车 ' ， 
tag: 3 
name: ! 顺 风车 '， 
tag: 2 
name: ' 专 车 '， 
tags D 
a 。 专车 
。 快车 
] 。 顺风 车 
} 。 出 租车 
} 
</script> 图 3-20 orderBy 
在 <ul> 标 签 中 根据 field 变量 代表 的 tag 字段 正 序 排列 数据 ， 效 果 如 图 3-20 Pros 


3.1.7  v-text 


v-text 指令 可 以 更 新 元 素 的 textContent。 在 内 部 ，{{ Mustache 他 插值 也 被 编译 为 textNode 
的 一 个 v-text 指令 。 代 码 示 例如 下 : 


<span v-text="msg"></span><br/> 
<!-- same as --> 


<span>{ {msg} }</span> 


3.1.8 v—html 


v-html 指令 可 以 更 新 元 素 的 innerHTML。 内 容 按 普通 HTML 插入 一 一 数据 绑 定 被 忽略 。 如 
果 想 复 用 模板 片段 ， 则 应 当 使 用 partials. 


在 内 部 ，{{{ Mustache } 分 插值 也 会 被 编译 为 锚 节 点 上 的 一 个 v-html 指令 。 


HS 不 建议 在 网 站 上 直接 动态 泻 染 任意 HTML 片段 ， 很 容易 导致 XSS 攻击 。 


«div v-html-"html"»«/div» 
<!-- 相同 --> 
<div>{{{html}}}</div> 
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3.1.9 v—bind 


v-bind 指令 用 于 响应 更 新 HTML 特性 ， 将 一 个 或 多 个 attribute， 或 者 一 个 组 件 prop 动态 绑 
定 到 表达 式 。v-bind 可 以 简写 为 : 


<!-- 绑 定 attribute --> 
<img v-bind:src="imageSrc"> 
<!-- 缩写 --> 


<img :src="imageSrc"> 
在 绑 定 class BK style 时 ， 文 持 其 他 类 型 的 值 ， 如 数组 或 对 象 。 代 码 示例 如 下 : 


<body id-"example"» 


«div :class-"[classA, ( classB: isB, classC: isC }]"></div> 
</body> 
<script> 
var demo = new Vue({ 
el: '#example', 
data: 1 
classA: 'A', 
isB: false, 
isC: true 
} 
} 
</script> 


效果 如 图 3-21 所 示 。 


图 3-21  v-bind 
没有 参数 时 ， 可 以 绑 定 到 一 个 对 象 。 注 意 ， 此 时 class 和 style 绑 定 不 文 持 数组 和 对 象 〈 对 
象 key 会 转换 为 小 写 )。 代 码 示例 如 下 : 


<body id="example"> 

«div v-bind="{ id: someProp, 'OTHERAttr': otherProp }"></div> 
</body> 
«script» 


var exampleVM2 = new Vue(í 
el: '#example', 
datas { 
someProp: 'idName', 
otherProp: 'prop' 
} 
} 
</script> 


效果 如 图 3-22 所 示 。 图 3-22 ”bind 数 组 


d-"example"» 
id-"idName" otherattr="prop"></div> 


</script> 
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在 绑 定 prop 时 , prop 必须 在 子 组 伯 


rr 


! 声 明 。 可 以 用 修饰 符 指 定 不 同 的 绑 定 类 型 。 修 饰 符 为 : 


O .Sync 一 一 双向 绑 定 ， 只 能 用 于 prop 绑 定 。 


O once 一 一 单 次 绑 定 ， 
O .camel 一 一 将 绑 定 的 特性 名 字 转 换 回 驼峰 命名 。 只 能 ) 
了 定 用 驼峰 命名 的 SVG 特性 ， 比 如 viewBox. 


E my-component 组 件 内 声明 --» 


:prop="someThing"></my-component> 


HATS 


<!-- prop SME, "prop" 必须 看 


<my-component 


26 
H He 


<!-- 双向 prop 绑 定 --» 


<my-component 


«1-- 单 次 prop 绑 定 - -> 


«my-component 


3.1.10 v—on 


KGA 
HS) 


于 绑 定 事件 监听 器 。 


v-on 1 


JF prop 绑 定 。 


普通 HTML 特性 的 绑 定 ， 通 


:prop.sync="someThing"></my-component> 


:prop.once="someThing"></my-component> 


事件 类 型 


参数 指定 ， 表 达 式 可 以 是 一 个 方法 的 名 字 或 一 


个 内 联 语句 ， 如 果 没 有 修饰 符 ， 也 可 以 省 略 。 


使 用 在 普通 元 素 上 时 ， 
听 子 组 件 触发 的 自 定 义 事 件 。 


在 监听 原生 DOM 事件 时 ， 如 果 


内 联 语 名 处理 器 


Vue.js 1.0.11 及 以 后 版 本 在 监听 自 定义 事件 时 ， 内 联 语句 可 以 访问 一 个 $arguments 属 
是 一 个 数组 ， 包 含 了 传 给 子 组 伯 
«1-- 方法 处 理 器 --> 


只 能 监听 原生 DOM 事件 ; 使 用 在 


只 定义 一 个 参数 ，DOM event 为 事件 的 唯一 参数 ， 如 果 在 
访问 原生 DOM 事件 ， 则 可 以 用 特殊 变量 $event 把 它 传 入 方法 。 


自 定义 元 素 组 件 上 时 ， 也 可 以 监 


性 ， 它 


F 的 $emit 回调 的 参数 。 


<button v-on:click="doThis"></button> 
<!-- 内 联 语句 --> 


«button v-on:click-"doThat('hello', $event)"»«/button» 


<!-- 缩写 --> 


«button @click="dol 


v-on 后 面 不 仅 可 以 跟 参 数 ， 还 可 以 增加 修饰 


O „stop —— i 


r'his"»«/button» 


S 
zm 


EH event.stopPropagation(). 
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H: [esc: 27. 


O .prevent 调用 event.preventDefault(). 
O .capture 一 一 添加 事件 侦 听 器 时 使 用 capture 模式 。 
O „self 只 当 事 件 是 从 侦 听 器 绑 定 的 元 素 本 身 触发 时 才 触 发 回调 。 
O .{keyCode | keyAlias} 只 在 指定 按键 上 触发 回调 。Vue.js 提供 的 键 值 ; 
tab: 9. enter: 13. space: 32、'delete': [8, 46]、up: 38. left: 37. right: 39、down: 40]. 
<!-- 停止 冒 泡 --» 
«button @click.stop="doThis"></button> 
«1-- 阻止 默认 行为 --> 
<button @click.prevent="doThis"></button> 
<!-- 阻止 默认 行为 ， 没 有 表达 式 --> 
«form @submit.prevent></form> 
<!-- 串联 修饰 符 --> 
«button @click.stop.prevent="doThis">stop</button> 
«i-- 键 修饰 符 ， 键 别名 --> 


«input 


Gkeyup.enter-"onEnter"» 


<!-- 键 


«input 


EI. WV --> 


@keyup.13="onEnter"> 


3.1.11  v-ref 


在 父 组 件 上 注册 一 个 子 组 件 的 索引 ， 便 于 直接 访问 。 不 需要 表达 式 ， 必 须 提 供 参数 id。 可 
以 通过 父 组 件 的 $refs 对 象 访问 子 组件 。 


当 v-ref 和 v-for 一 起 使 用 时 , 注册 的 值 将 是 一 个 数组 , 包含 所 有 的 子 组 件 ， 对 应 于 绑 定 数组 ; 
如 果 v-for 使 用 在 一 个 对 象 上 ， 注 册 的 值 将 是 一 个 对 象 ， 包 含 所 有 的 子 组 件 ， 对 应 于 绑 定 对 象 。 


注 : 因为 HTM 不 区 分 大 小 写 ，camelCase 风格 的 名 字 比 如 v-ref:someRef 将 全 部 转换 为 小 


写 。 可 以 用 v-refisome-ref 设置 this.$els.someRef。 


3.1.12  v—el 


为 DOM 元 素 注册 一 个 索引 ,方便 通过 所 属实 例 的 $els 访问 这 个 元 素 。 可 以 用 v-el:some-el i 


'& this.$els.someEl. 


<span v-el:msg>hello</span> 


<span v-el:other-msg>world</span> 


通过 this.$els 获取 相应 的 DOM 7625: 


this.$els.msg.textContent // -> "hello" 
this.$els.otherMsg.textContent // -> "world" 


3.1.13 v-pre 


编译 时 跳 过 当前 元 素 和 它 的 子 元 素 。 可 以 用 来 显示 原始 Mustache 标签 。 跳 过 大 量 没有 指令 
的 节点 会 加 快 编译 。 


3.1.14 v-cloak 


v-cloak 这 个 指令 保持 在 元 素 上 直到 关联 实例 结束 编译 。AngularJS 也 提供 了 相同 的 功能 。 
当 和 CSS 规则 如 [v-cloak]{ display: none } 一 起 使 用 时 ， 这 个 指令 可 以 隐藏 未 编译 的 Mustache 标 
签 直 到 实例 准备 完毕 ， 和 否则 在 泻 染 页 面 时 ， 有 可 能 用 户 会 先 看 到 Mustache 标签 ， 然 后 看 到 编译 
后 的 数据 。 用 法 如 下 : 


[v-cloak] { 


display: none; 
} 
<div v-cloak> 
{{ message }} 
</div> 


3.2 ” 自 定 义 指令 


使 用 过 AngularJS 的 同学 一 定 知道 它 的 指令 是 使 用 directive(name,factory functiom 实 现 的 ， 
格式 如 下 : 


angular.module('myapp', [],) 


.directive (myDeirective, function () { 


return{ 
template: '', 
restrict: '', 
template: '', 


replace: '' 
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3.2.1 基础 


除了 内 置 指令 ，Vue.js 也 人 允许 注册 自 定 义 指 令 。 


射 为 DOM 行为 。 


我 们 来 看 看 Vues 是 如 何 实现 的 。Vue.js 
它 接收 两 个 参数 : 指令 
(此 方法 


定义 指令 
部 自 定 义 指令 
1. 钩子 函数 


AngularJS 提供 了 两 个 函数 : compile 和 link, 其 


自 定 义 指 


ID 与 定义 对 象 。 
相当 于 AngularJS restrict 属性 值 为 A)。 


令 提供 一 


TIBUS 


1 将 数据 的 变化 映 


] Vue.directive(id,definition) 方 法 注册 一 个 全 局 自 
岂可 以 用 组 件 


的 directives 选项 注册 一 个 局 


:编译 函数 主要 负责 将 作 / 


kA DOM 进行 


链接 ; 链接 函数 用 来 创建 可 以 操作 DOM 的 指令 。 注 意 ，compile 和 link 选项 是 互 斥 的 ， 如 果 同 
时 设置 这 两 个 选项 ， 则 会 把 compile 返回 的 函数 当 作 link 函数 ， 而 忽略 link 选项 本 身 。Vue.js 
同样 也 提供 了 几 个 钧 子 函数 〈 都 是 可 选 的 ， 相 互 之 间 没 有 制约 关系 ): 
O bind 一 一 只 调用 一 次 ， 在 指令 第 一 次 绑 定 到 元 素 上 时 调用 。 
O update 一 一 在 bind 之 后 立即 以 初始 值 为 参数 第 一 次 调用 ， 之 后 每 当 绑 定 值 变化 时 调 
1, BRASS IAA. 
O unbind 只 调用 一 次 ， 在 指令 从 元 素 上 解 绑 时 调用 。 
Vue.directive('my-directive', ( 
bind: function () { 
// 准备 工作 
// 例如 ， 添 加 事件 处 理 器 或 只 需要 运行 一 次 的 高 耗 任务 
I 
update: function (newValue, oldValue) { 
// 值 更 新 时 的 工作 


// 也 会 以 初始 值 为 参数 调用 


I 
unbind: function () 


// 清理 工作 


// 例如 ， 删 除 bind() 


次 


{ 


添加 的 事件 监听 器 


在 注册 之 后 , 


便 可 以 在 Vue.js 模板 ! 


这 样 用 ( 记 着 添加 前 级 v 


<div v-my-directive="someValue"></div> 


当 只 需要 update 函数 时 ， 可 以 传 入 一 个 函数 奉 代 定义 对 象 : 


Vue.directive('my-directive', function (value) { 
// 这 个 函数 用 作 update () 


2. 指令 实例 属性 


所 有 的 钩子 函数 都 将 被 复制 到 实际 的 指令 对 象 中 ， 在 钩子 内 this 指向 这 个 指令 对 象 。 这 个 
对 象 暴露 了 一 些 有 用 的 属性 : 


O el — 指令 绑 定 的 元 素 。 


vm 一 一 拥有 该 指令 的 上 下 文 ViewModel. 


expression 一 一 指令 的 表达 式 ， 不 包括 参数 和 过 滤器 。 
arg 一 一 指令 的 参数 。 
name 一 一 指令 的 名 字 ， 不 包含 前 级 。 


modifiers — 一 个 对 象 ， 包 含 指令 的 修饰 符 。 


descriptor 一 一 一 个 对 象 ， 包 含 指令 的 解析 结果 。 


HS 我 们 应 当 将 这 些 属 性 视 为 只 读 ， 不 要 修改 它们 。 我 们 也 可 以 给 指令 对 象 添加 自 定义 属 
性 ， 但 是 注意 不 要 覆盖 已 有 的 内 部 属性 。 代 码 示例 如 下 : 


<body id-"example" @click="up" > 
<div id="demo" v-demo:hello.a.b="msg"></div> 
</body> 
<script> 
Vue.directive('demo', { 
bind: function () { 
console.log('demo bound!') 
), 
update: function (value) { 
this.el.innerHTML - 


"name - ' + this.name + '«br»' + 

‘expression - ' + this.expression + '<br>!' + 

‘argument - ' + this.arg + '<br>' + 

"modifiers - ' + JSON.stringify(this.modifiers) + '«br»' + 
‘value - ' + value + '<br>!' + 


'vm-msg' + this.vm.msg 
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} 
} 
var demo = new Vue({ 
el: '#example', 
data: { 
msg: ‘hello!’ 
), 
methods: { 
up: function () { 


console.info ("click"); 


name - demo 

} expression - msg 

argument - hello 

r) modifiers - ("b":true, "a":true] 
value - hello! 


«/script» 
/ P vm-msghello! 


TURRIS NS 图 3-23 指令 实例 属性 

3， 对 象 字面 量 

如 果 指 令 需 要 多 个 值 ， 则 可 以 传 入 一 个 JavaScript 对 象 字面 量 。 记 住 ， 指 令 可 以 使 用 任意 
合法 的 JavaScript 表达 式 。 代 码 示例 如 下 : 


<body> 
«div id="demo" v-demo="{ color: 'white', text: 'hello!' }"></div> 


«/body» 
«script» 

Vue.directive('demo', function (value) { 
console.log(value.color) // "white" 
console.log(value.text) // "hello!" 

} 

var demo = new Vue({ 
el: '#demo' 

} 

</script> 


效果 如 图 3-24 所 示 。 


white 
hello! 
Download the Vue Devtools for a better development experience: 
https: //github.com/vuejs/vue-devtools 
SS 


图 3-24 ”对 象 字面 量 


uil 


的 值 将 按 普通 字符 串 处 理 并 传递 给 update 方法 。update 方 


4. 字面 修饰 符 

当 指 令 使 用 了 字面 修饰 符 时 ， 它 
法 将 只 调用 一 次 ， 因 为 普通 字符 串 不 能 响应 数据 变化 。 代 码 示 例如 下 : 
<body> 


«div id-"demo" v-demo.literal-"foo bar baz"></div> 
</body> 
<script> 
Vue.directive('demo', function (value) { 
console.info (value) 


} 


var demo = new Vue({ 
el: '#demo!' 
} 
</script> 


效果 如 


图 3-25 所 示 。 


foo bar baz 


Download the Vue Devtools for a 


better development experience: 


https://github.com/vuejs/vue-devtools 
图 3-25 ”字面 修饰 符 
5. 元 素 指 令 


有 时 我 们 想 以 自 定义 元 素 的 形式 使 用 指令 ， 而 不 是 以 属性 


的 形式 。 这 与 AngularJS AY “E” 


TT 


间 令 非常 相似 。 元 素 指 令 可 以 看 作 是 一 个 轻 量 组 伯 


o H UA F 


j 这 样 注册 一 个 自 定 义 元 素 指令 : 


<body id="demo"> 
«my-directive class-"hello" name="hi"></my-directive> 
«/body» 
«script» 
Vue.elementDirective('my-directive', ( 
// API 同 普通 指令 
bind: function () { 
console.info(this.el.className ) 
console.info(this.el.getAttribute ("name")) 
} 
} 
var demo 
el: 
} 


</script> 


new Vue ({ 


' fdemo' 
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元 素 指 令 不 能 接受 参数 或 表达 式 ， 但 是 它 可 以 读 取 元 素 的 特性 ， 从 而 决定 它 的 行为 。 

不 同 于 普 元 素 指 令 是 终结 性 的 。 这 意味 着 ， Al Vue 过 到 一 个 元 素 指令 ， 它 将 跳 
过 该 元 素 只 有 该 元 素 指令 本 身 可 以 操作 该 元 素 及 其 子 元 素 。 


3.2.2 ”高 级 选 


项 


外 部 的 作用 域 进 行 数据 绑 


AngularJS 提供 了 几 种 方法 能 够 将 指令 内 部 的 隔离 作用 域 同 指令 
定 ， 如 本 地 作用 域 属性 : @ 和 双向 绑 定 : = 以 及 方法 引用 : &. 


scope: { 
ngModel: ‘=’ , // 将 ngModel 同 指定 对 象 绑 定 
onSend: “&”，  // 将 引用 传递 给 这 个 方法 
formName: ‘@’  // 存储 与 formName 相关 联 的 字符 串 


Vuejs 也 允许 注册 自 定 义 指 令 。 自 定义 指令 提供 一 种 机 制 将 数据 的 变化 映射 为 DOM 行为 。 
1. params 
自 定 义 指令 可 以 接受 一 个 params 数组 ， 指 定 一 个 特性 列表 ，Vue 编译 器 将 自动 提取 绑 定 元 


素 的 这 些 特性 。 代 码 示例 如 下 : 


<body id="demo"> 
<my-directive class="hello" name="hi" a="params"></my-directive> 
</body> 
<script> 
Vue.elementDirective('my-directive', { 
['a'], 
// API 同 普通 指令 
bind: 


params: 
function () { 
console.log(this.params.a) 
console.info(this.el.getAttribute ("name") ) 
} 
} 


var demo = new Vue ({ 


el: '#demo' 
} 
</script> 
此 API 也 支持 动态 属性 。this.params[key] 会 自动 保持 更 新 。 男 外 ， 可 以 指定 一 个 回调 ， 在 


第 3 章 指令 47 


值 变 化 时 调用 。 代 码 示例 如 下 : 


<body id="demo"> 
<my-directive class="hello" name="hi" v-bind:a="someValue"></my-directive> 
<input type="text" v-model="someValue"/> 
</body> 
<script> 
Vue.elementDirective('my-directive', { 
params: ['a'], 
paramWatchers: { 
a: function (val, oldVal) { 


console.log('a changed!') 


} 
} 
var demo = new Vue({ 
el: '#demo', 
data: { 
someValue: 'value' 
} 
} 


</script> 
效果 如 图 3-26 所 示 。 
value change| 
* Ww < > £s sl, I AT. 控制 台 HTN 


value 
value E 

ps 
li] E 6) = changed! 


改变 后 


13-26 params 


注 : RMT props， 指 令 参 数 的 名 字 在 JavaScript 中 使 用 camelCase 风格 ， 在 HTML 中 对 应 
使 用 kebab-case 风格 。 例 如 ， 假设 在 模板 中 有 一 个 参数 disable-effect， 在 JavaScript 中 以 
disableEffect 访问 它 。 


2. deep 


如 果 自 定义 指令 使 用 在 一 个 对 象 上 ， 当 对 象 内 部 属性 变化 时 要 触发 update， 则 在 指令 定义 
对 得 中 指定 deep: true。 代 码 示例 如 下 : 


<body id="demo"> 


48 Vue.js 权威 指南 


«div v-my-directive="a"></div> 
<button @click="change" >change</button> {{a.b.c}} 
</body> 
<script> 
Vue.directive('my-directive', 
deep: true, 
update: function (obj) { 
// 当 obj Wit PEAR LIN VF 
console.info(obj.b.c) 
} 


} 
var demoVM = new Vue ({ 


el: '#demo', 
data: { 
ati bti er2 P 4 


} F 

methods: { change | 2 | change | 4 
change: function ()( a p EEA a p Elements 

demoVM.a.b.c = 4; 5 

} © Y <top frame © Y <topframe 

} 

n o 2 o2 
«/script» n ENPE 点 击 后 Dewnlaad the Vue 

效果 如 图 3-27 所 示 。 图 3-27 deep 
3. twoWay 


如 果 指 令 想 向 Vue 实例 写 回 数据 ， 则 在 指令 定义 对 象 中 指定 twoWay:true。 该 选项 允许 在 指 
令 中 使 用 this.set(value)。 代 码 示 例如 下 : 


<body id-"demo"» 
自 定义 组 件 : «input v-example="a.b.c" /><br/> 


父 作用 域 : {{ a.b.c}} 
</body> 
<script> 
Vue.directive('example', { 


twoWay: true, 
bind: function () { 
this.handler = function () { 
// 把 数据 写 回 vm 
// 如 果 指 令 这 样 绑 定 v-example="a.b.c" 
// 这 里 将 会 给 wvm.a.b.c ”赋值 


this.set(this.el.value) 
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).bind(this) 


this.el.addEventListener('input', this.handler) 


}, 


unbind: function () ( 


this.el.removeEventListener('input', this.handler) 


} 
} 
var demo = new Vue({ 
el: '#demo', 
data:{ a:{b:{ c:2 } } } 
} 
</script> 


效果 如 图 3-28 所 示 。 


4. acceptStatement 


自 定义 组 件 ， 
父 作 用 域 : 2 
自 定义 组 件 ，|hell 
父 作 用 域 ， hello 


图 3-28 twoWay 


传 入 acceptStatement:true 可 以 让 自 定义 指令 接受 内 联 语句 , 就 像 v-on 那样 。 代 码 示例 如 下 : 


<body id="demo"> 
«div v-my-directive="at+"></div> 
{{a}} 
</body> 
<script> 
Vue.directive('my-directive', { 
acceptStatement: true, 
update: function (fn) { 
// 传 入 值 是 一 个 函数 
// 在 调用 它 时 将 在 所 属实 例 作 用 域内 计算 "a++" 语 名 
console.info(fn.toString()) 
fn () 


} 

var demoVM = new Vue ({ 
el: '#demo', 
data: { 


ars 


} 
</script> 


效果 如 图 3-29 所 示 。 
5. Terminal ( 1.0.19 及 以 后 版 本 ) 
Vue 通过 递归 遍历 DOM 树 来 编译 模块 。 但 是 当 它 遇 


a p Elements Network Sources 


© Y <topframe> v Preserve lod 
Regex Hid 


@ function handler(e) { 
scope.$event = e; 
fn.call(scope, scope); 
scope.$event = null; 


Download the Vue Devtools for a b 
https://github.com/vuejs/vue-devt 


图 3-29  acceptStatement 


到 terminal 指令 时 会 停止 遍历 这 个 元 素 
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的 后 代 元 素 , 这 个 指令 将 接管 编译 这 个 元 素 及 其 后 代 元 素 的 作 


È 


编写 


<body id-"example"» 


«div id="modal"></div> 


<div v-inject:modal» 
<hl>header</h1> 
<p>body</p> 
<p>footer</p> 
</div> 
</body> 
<script> 


var FragmentFactory = 


定义 terminal 指令 是 
不 可 能 编写 自 定义 terminal 指令 。 用 terminal:true 指定 自 定义 terminal 指令 ， 
Vue.FragmentFactory 来 编译 partial。 下 面 是 一 个 自 定义 terminal 指令 ， 它 编 
结果 注入 到 页 面 的 另 一 个 地 方 。 代 码 示 例如 下 : 


个 高 级 话题 ， 


Vue.FragmentFactory 


var 


var 


remove - Vue.util.remove 


createAnchor 


Vue.util.createAnchor 


Vue.directive('inject', 
terminal: true, 


bind: function () { 


{ 


需要 较 好 地 理解 Vue 的 编译 流程 ， 但 并 不 是 说 


Eo v-if 和 v-for 都 是 terminal 指令 。 


译 其 


var container = document.getElementById(this.arg) 


this.anchor = createAnchor('v-inject') 


container.appendChild (this.anchor) 


remove (this.el) 


var factory = new FragmentFactory(this.vm, this.el) 


this.frag - factory.create(this. host, this. scope, this. frag) 


this.frag.before(this.anchor) 


), 
unbind: function () 


{ 


this.frag.remove () 


remove (this.anchor) 


} 
} 
// 创建 根 实例 


new Vue ({ 


el: '#example' 
} 
</script> 


效果 图 如 3-30 所 示 。 


可 能 还 需 


f 其 内 容 模板 并 


rh 


R] 


3-30 


terminal 
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如 果 想 编写 自 定义 terminal 指令 ， 建 议 通读 内 置 terminal 指令 的 源码 ， 如 v-if All v-for， 以 
便 更 好 地 了 解 Vue.js 的 内 部 机 竺 


c 


o 


6. priority 

可 以 给 指令 指定 一 个 优先 级 。 如 果 没 有 指定 优先 级 ， 普 通 指令 默认 是 1000, terminal 指令 默 
认 是 2000。 同一 个 元 素 上 优先 级 高 的 指令 会 比 其 他 指令 处 理 得 早 一 些 , 优先 级 一 样 的 指令 按照 它 
在 元 素 特性 列表 中 出 现 的 顺序 依次 处 理 ， 但 是 不 能 保证 这 个 顺序 在 不 同 的 浏览 器 中 是 一 致 的 。 


另外 ， 流 程控 制 指令 v- 计 和 v-for 在 编译 过 程 中 始终 拥有 最 高 的 优先 级 。 


3.3 ”内 部 指令 解析 


前 面 两 节 分 别 讲述 了 内 部 指令 和 如 何 自 定义 指令 ， 下 面 我 们 来 简单 看 一 下 Vuejs 的 内 部 指 
令 是 如 何 实现 的 。 源 码 定义 如 下 : 


<!-- 源 码 目录 : src/directive/public/show.js --» 


export default { 
bind () { 
// 先 存储 下 一 个 兄弟 节点 〈 如 果 有 )， 因 为 v-else 会 和 v-show 绑 定 使 用 


var next = this.el.nextElementSibling 


if (next && getAttr(next, 'v-else') !== null) { 
this.elseEl = next 
} 
), 
update (value) { 
this.apply(this.el, value) 
if (this.elseEl) { 
this.apply(this.elseEl, !value) 
} 
), 
apply (el, value) { 
if (inDoc(el)) ( 
applyTransition(el, value ? 1 : -1, toggle, this.vm) 
perse f 
toggle () 
} 
function toggle () { 
el.style.display = value ? '' : 'none' 


} 
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再 看 
<!-- 源 码 目录 


export default { 
priority: MODEL, 


twoWay: true, 


下 model 是 如 何 实现 的 。 源 码 定义 如 下 ; 


src/directive/public/model.js --> 


handlers: handlers, 
params: ['lazy', 'number', 'debounce'], 
bind () { 


this.checkFilters () 

if (this.hasRead && 
// 友情 提示 : 此 处 省 略 

} 

var el = this.el 

var tag = el.tagName 


var handler 


if (tag === 'INPUT') { 
handler = handlers[el.type] || 

} else if (tag === 'SELECT') { 
handler = handlers.select 

} else if (tag === 'TEXTAREA') { 
handler = handlers.text 

} else { 


process.env.NODE ENV 


'v-model does not support element type: 


this.vm 

) 

return 
} 
el. v model = this 
handler.bind.call(this) 
this.update - handler.update 
this. unbind - handler.unbind 
}, 
checkFilters () { 

var filters = this.filters 
if (!filters) 
var i = filters.length 
(is=) f 
var filter = 


return 
while 

if (typeof filter === 'function' 
this.hasRead = true 


} 
if (filter.write) { 


'this.hasWrite) 


'production' 


resolveAsset(this.vm.S$options, 


{ 


handlers.text 


&& warn ( 


' + tag, 


|| filter.read) 


'filters' 


{ 


, 


filters[i].name) 


this.hasWrite = true 


} 
} 
unbind () ( 
this.el. v model - null 
this. unbind && this. unbind() 


<!-- 源 码 目录 : src/directive/public/radio.js --» 
export default { 
bind () { 
var self - this 


var el = this.el 
this.getValue = function () { 
// value overwrite via v-bind:value 
if (el.hasOwnProperty(' value')) { 
return el. value 
} 
var val = el.value 
if (self.params.number) { 
val - toNumber (val) 
} 
return val 
} 
this.listener = function () { 
self.set (self.getValue() ) 
} 
this.on('change', this.listener) 
if (el.hasAttribute('checked')) { 
this.afterBind = this.listener 
} 
}, 
update (value) { 
this.el.checked = looseEqual (value, this.getValue()) 


3.4 ”常见 问题 解析 


O v-on 可 以 绑 定 多 个 方法 吗 ? 


v-on 可 以 绑 定 多 种 类 型 的 方法 ， 可 以 是 click 事件 ， 可 以 是 focus 


事件 ， 也 可 以 是 change 
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事件 ， 根 据 业 务 需 求 进行 选择 。 但 是 ， 如 果 用 v-on 绑 定 了 两 个 甚至 多 个 click 事件 ， 那 么 v-on 
只 会 绑 定 第 一 个 click 事件 ， 其 他 的 会 被 自动 忽略 。 


<input type="text" :value-"name" @input="onInput" Gfocus-"onFocus" @blur="onBlur" /> 


O 一 个 Vue 实例 可 以 绑 定 多 个 element 元 素 吗 ? 


这 个 疑问 产生 的 原因 是 没有 理解 el 的 概念 。el 为 实例 提供 挂 载 元 素 , 值 可 以 是 CSS 选择 符 ， 
或 实际 的 HTML 元 素 ， 或 返回 HTML 元 素 的 函数 。 注 意 ， 元 素 只 用 作 挂 载 点 。 如 果 提 供 了 模 
板 ， 则 元 素 被 替换 ， 除 非 replace 为 false。 元 素 可 以 用 vm.$el 访问 。 


用 在 Vue.extend 中 必须 是 函数 值 ， 这 样 所 有 实例 不 会 共享 元 素 。 


如 果 在 初始 化 时 指定 了 这 个 选项 , 实例 将 立即 进入 编译 过 程 ; 否则 , 需要 调用 vm.$mount(), 
手动 开始 编译 。 
O 在 Vue 中 如 何 让 v-for 循环 出 来 的 列表 里 面 的 click 事件 只 对 当前 列表 内 元 素 有 效 ? 


比如 模板 如 下 ， 想 点 击 二 控制 span 的 显 隐 : 


«li Qclick="show"> 
<span>1</span> 


«/li» 
从 数据 角度 出 发 ， 定 义 好 数据 结构 ， 然 后 操作 数据 : 


<body id="example"> 


<div> 
<ul id="app"> 
<li v-for-'item in items' @click="toggle (item) "> 
<span v-show='item.show'>{{item.content}}</span> 
</li> 
</ul> 
</div> 
</body> 
<script> 
new Vue ({ 
el: '#app', 
data: function() { 
return { 
items: [{ 


content: '1 item', 


| 
content: "2 item', 
show: true 

pH 


content: '3 item', 


show: true 


] 
} 
), 
methods: í( 
toggle: function(item) { 


item.show = !item.show; 


} 
}) 
</script> 


或 者 通过 $event 对 象 ， 获 取 当 前 事件 源 ， 然 后 操作 下 面 的 span 元 素 ， 方 法 很 多 。 


B5 
计算 属性 


通常 我 们 会 在 模板 中 绑 定 表达 式 ， 模 板 是 用 来 描述 视图 结构 的 。 如 果 模 板 中 的 表达 式 存在 
过 多 的 逻辑 ， 横 板 会 变 得 腑 肿 不 堪 ， 维 护 变 得 非常 困难 。 因 此 ， 为 了 简化 逻辑 ， 当 某 个 属性 的 
值 依赖 于 其 他 属性 的 值 时， 我们 可 以 使 用 计算 属性 。 


IK 


41 什么 是 计算 属性 


计算 属性 就 是 当 其 依赖 属性 的 值 发 生变 化 时 , 这 个 属性 的 值 会 自动 更 新 , 与 之 相关 的 DOM 
部 分 也 会 同步 自动 更 新。 代码 示例 如 下 : 


<div id-"example"» 


«input type-"text" v-model-"didi" /» 
<input type="text" v-model-"family" /> 
<br> 
didi={{ didi }}, family={{ family }}, didiFamily = {{ didiFamily }} 
</div> 
var vm = new Vue({ 
el: '#example', 
data: { 
didi: 'didi', 
family: 'family' 
), 
computed: { 
// 一 个 计算 属性 的 getter 


didiFamily: function () { 
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// “this” 指 向 vm 实例 


return this.didi + this.family 


当 vm.didi 和 vm.family 的 值 发 生变 化 时 ，vm.didiFamily 的 值 会 自动 更 新 ， 并 且 会 自动 同步 
更 新 DOM 部 分 。 


前 面 实例 只 提供 了 getter， 实 际 上 除了 getter， 我 们 还 可 以 设置 计算 属性 的 setter。 代 码 示例 
如 下 : 


var vm = new Vue ({ 
el: '#example', 
data: { 
didi: 'didi', 
family: 'family' 
), 
computed: { 
didiFamily: { 
// 一 个 计算 属性 的 getter 
get: function () ( 
// this 指向 vm 实例 
return this.didi + ' ' + this.family 
), 
// 一 个 计算 属性 的 setter 


set: function (newVal) { 


var names = newVal.split(' ') 
this.didi = names[0] 


this.family = names[1] 


当 设 置 vm.didiFamily 的 值 时 ，vm.didi 和 vm.family 的 值 也 会 自动 更 新 。 


42 ”计算 属性 缓存 


计算 属性 的 特性 的 确 很 诱 人 ， 但 是 如 果 在 计算 属性 方法 中 执行 大 量 的 耗 时 操作 ， 则 可 能 会 
带 来 一 些 性 能 问题 。 例 如 ， 在 计算 属性 getter 中 循环 一 个 大 的 数组 以 执行 很 多 操作 ， 那 么 当 频 
繁 调用 该 计算 属性 时 ， 就 会 导致 大 量 不 必要 的 运算 。 
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在 Vuejs 0.12.8 版 本 之 前 ， 只 要 读 取 相 应 的 计算 属性 ， 对 应 的 getter 就 会 重新 执行 。 而 在 
Vue.js 0.12.8 版 本 中 , 在 这 方面 进行 了 优化 , 即 只 有 计算 属性 依赖 的 属性 值 发 生 了 改变 时 才 会 重 
新 执行 getter. 

这 样 也 存在 一 个 问题 ， 就 是 只 有 Vue 实例 中 被 观察 的 数据 属性 发 生 了 改变 时 才 会 重新 执行 
getter。 但 是 有 时 候 计算 属性 依赖 实时 的 非 观察 数据 属性 。 代 码 示 例如 下 : 


var vm = new Vue({ 
data: { 


welcome: 'welcome to join didiFamily' 


Yr 
computed: { 
example: function () ( 


return Date.now() + this.welcome 


我 们 需要 在 每 次 访问 example 时 都 取得 最 新 的 时 间 而 不 是 缓存 的 时 间 。 从 Vue.js 0.12.11 版 
本 开始 ， 默 认 提 供 了 缓存 开关 ， 在 计算 属性 对 象 中 指定 cache 字段 来 控制 是 否 开启 缓存 。 代 码 
示例 如 下 : 


var vm = new Vue({ 


data: { 
welcome: 'welcome to join didifamily' 
), 
computed: { 
example: { 
// 关闭 缓存 ， 默 认为 true 
cache: false, 
get: function () ( 


return Date.now() + this.welcome 


o 


设置 cache JJ false 关闭 缓存 之 后 ， 每 次 直接 访问 vm.example 时 都 会 重新 执行 getter 方法 
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4.3 ”常见 问题 


在 实际 开发 中 使 用 计算 属性 时 ， 我 们 会 遇 到 各 种 各 样 的 问题 ， 以 下 是 我 们 搜集 到 的 一 些 党 
见 问 题 以 及 解决 方案 。 


4.3.1 计算 属性 getter 不 执行 的 场景 


从 前 面 章节 中 我 们 了 解 到 ， 当 计算 属性 依赖 的 数据 属性 发 生 改变 时 ， 计 算 属性 的 getter 
方法 就 会 执行 。 但 是 在 有 些 情况 下 ,虽然 依赖 数据 属性 发 生 了 改变 ， 但 计算 属性 的 getter 方 
法 并 不 会 执行 。 

当 包含 计算 属性 的 节点 被 移 除 并 且 模板 中 其 他 地 方 没有 再 引用 该 属性 时 ， 那 么 对 应 的 计算 
属性 的 getter 方法 不 会 执行 。 代 码 示例 如 下 : 


<div id="example"> 


<button @click='toggleShow'>Toggle Show Total Price</button> 
<p v-if-"showTotal"»Total Price = {{totalPrice}}</p> 


</div> 


new Vue ({ 

el: '#example', 

data: { 
showTotal: true, 
basePrice: 100 

), 

computed: { 
totalPrice: function () { 

return this.basePrice + 1 

} 

), 

methods: { 
click: function() { 


this.showTotal = !this.showTotal 


当 点 击 按钮 使 showTotal 为 false 时 ,此 时 了 元 素 会 被 移 除 , 在 P 元 素 内 部 的 计算 属性 totalPrice 
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的 getter 方法 不 会 执行 。 但 是 当 计 算 属 
示例 如 下 : 


<div id="example"> 


性 一 直 


EL 


<button @click='toggleShow'>Toggle Show Total Price</button> 


«i-- 一 直 出 现在 模板 中 ， 不 会 条 件 性 隐藏 --> 
<p>{{totalPrice}}</p> 


<p v-if="showTotal">Total Price = {{totalPrice}}</p> 


</div> 


4.3.2 在 v-repeat 中 使 用 计算 属性 


«div id-"items"» 
<p v-repeat-"items" v-component-"item"» 
«button»[((fulltext)])«/button» 
</p> 


</div> 


var items = [ 

{ number:1, text:'one' }, 

{ number:2, text:'two' } 
] 
var vue = new Vue({ 

el: '#items', 

data: { items: items }, 

components: { 

item: { 
computed: { 
fulltext: function() { 


return ‘item ' + this.text 


在 Vue.js 0.12.* 版 本 中 ，Vue.js 废弃 了 v-component 指令 ， 所 以 我 们 需要 使 用 


有 时 候 从 后 端 获得 ISON 数据 集合 后 ， 我 们 需要 对 单条 数据 应 用 计算 属 
之 前 的 版 本 中 ， 我 们 可 以 在 v-repeat 所 在 元 素 上 使 用 v-component 指令 。 


ld 


现在 模板 中 时 ，getter 方法 还 是 会 被 执行 。 代 码 


E. TE Vue.js 0.12 


代码 示例 如 下 : 


日 定义 元 素 组 
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件 来 实现 在 v-repeat 中 使 用 计算 属性 。 代 码 示 例如 下 : 


«div id-"items"» 


«my-item v-repeat-"items" inline-template> 


«button»((fulltext)]«/button» 
«/my-item» 


«/div» 


var items - [ 
{ number:1, text:'one' }, 
{ number:2, text:'two' } 
] 
var vue = new Vue ({ 
el: 'fitems', 
data: { items: items }, 
components: { 
'my-item': { 
replace: true, 
computed: { 


fulltext: function() { 


return 'item ' + this.text 


Og 
表单 控件 绑 定 


在 Web 应 用 中 ， 我 们 经 常会 使 用 表单 向 服务 端 提 交 一 些 数据 ， 而 通常 也 会 在 表单 项 中 绑 定 
一 些 如 input、change 等 事件 对 用 户 输入 的 数据 进行 校 验 、 更 新 等 操作 。 在 Vue.js 中 、 我 们 可 以 
使 用 v-model 指令 同步 用 户 输入 的 数据 到 Vue 实例 data 属性 中 , 同时 会 对 radio. checkbox, select 
等 原生 表单 组 件 提供 一 些 语 法 糖 使 表单 操作 更 加 容易 。 


5.1 基本 用 法 


下 面 我 们 列举 基本 例子 来 看 看 如 何 使 用 v-model 更 新 表单 控件 ， 具 体 的 v-model 数据 绑 定 
会 在 后 续 章 节 中 展开 介绍 。 


5.1.1 text 


设置 文本 框 v-model 为 naame， 代 码 示例 如 下 : 


<span>Welcome {{ name }} join DDFE</span> 


<br> 


<input type="text" v-model-"name" placeholder="join DDFE"> 
当 用 户 操作 文本 框 时 ，vm.name 会 自动 更 新 为 用 户 输入 的 值 ， 同 时 ，span 内 的 内 容 也 会 随 


5.1.2 checkbox 


复 选 框 checkbox 在 表单 中 会 经 常 使 用 ， 下 面 我 们 来 看 看 单个 checkbox 如 何 使 用 v-model。 
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代码 示例 如 下 : 


<input type="checkbox" id="checkbox" v-model="checked"> 


<label for="checkbox">{{ checked }}</label> 

当 用 户 勾 选 了 checkbox l|, vm.checked=true, AM] vm.checked=false, label 中 的 值 也 会 随 
之 改变 。 

大 多 数 时 候 我 们 使 用 的 都 是 多 个 复 选 框 ， 即 一 个 复 选 框 组 。 此 时 ， 被 选中 的 值 将 会 放 入 一 
个 数组 中 。 代 码 示 例如 下 : 


<input type="checkbox" id="flash" value-"flash" v-model="bizLines"> 


«label for="flash"> 快 车 </label> 


<input type="checkbox" id="premium" value="premium" v-model="bizLines"> 


«label for="premium"> 专 车 </label> 


<input type="checkbox" id="bus" value-"bus" v-model-"bizLines"» 


«label for="bus">Ht</label> 


<br> 
<span>Checked lines: {{ bizLines | json }}</span> 
new Vue ({ 

eri i 

data: { 

bizLines: [] 

} 
} 
5.1.3 radio 


当 单 选 钮 被 选中 时 ，v-model 中 的 变量 值 会 被 赋值 为 对 应 的 value 值 。 代 码 示例 如 下 : 


<input type="radio" id="flash" value="flash" v-model="bizLine"> 
«label for="flash"> 快 车 </label> 
<br> 


<input type="radio" id-"bus" value="bus" v-model="bizLine"> 


«label for-"bus"»Pilc«/label» 


<br> 


<span>Picked: {{ bizLine }}</span> 


5.1.4 select 


>H 


= 
i 
2 
& 
GE 
H 
Np 
> 
可 
c 
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A select 控件 分 为 单 选 和 多 选 , 所 以 v-model 在 select 控件 
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现 。 代 码 示例 如 下 : 


<select v-model-"bizLine"» 


<option selected value="flash"> 快 车 </option> 


<option value="premium"> 专 车 </option> 


«option value="bus"> 巴 士 </option> 
</select> 


<span>Selected: {{ bizLine }}</span> 


当 被 选中 的 option 有 value 属性 时 , vm.selected 为 对 应 option 的 value 值 ; 否则 为 对 应 option 


HY text 值 。 
对 于 多 选 select 控件 ， 被 选中 的 值 会 放 入 一 个 数组 中 。 代 码 示例 如 下 : 


<select v-model="bizLines" multiple» 


<option selected value="flash"> 快 车 </option> 


<option value="premium"> 专 车 </option> 


«option value="bus"> 巴 士 </option> 
</select> 


<span>Selected: {{ bizLines | json }}</span> 


我 们 也 可 以 通过 v-for 指令 来 动态 生成 option，v-for、v-bind 指令 的 具体 用 法 i 


分 。 代 码 示例 如 下 : 


<select v-model="bizLine"> 
<option v-for="option in options" :value="option.value"> 
{{ option.text }} 
</option> 
</select> 


<span>bizLine: {{ bizLine }}</span> 


data: { 
bizLine: 'flash', 
options: [ 


{ text: 'IRE', value: 'flash' }, 


K 
{ text: ' 专 车 '， value: 'premium' }, 
FDI 


{ text: "OT"; value: 'bus' } 
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生成 的 HTML 结构 代码 如 下 : 


<select> 


<option value="flash"> 快 车 </option> 


<option value="premium"> 专 车 </option> 
p p p 


«option value="bus"> 巴 士 </option> 


</select> 
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在 通常 情况 下 ， 对 于 radio. checkbox, select 组 件 ， 通 过 v-model 绑 定 的 值 都 是 字符 串 ， 
checkbox 除外 ，checkbox 可 能 是 布尔 值 。 代 码 示例 如 下 : 


«l-- AJIT ^picked^ 的 值 是 字符 串 a --> 


<input type="radio" v-model="picked" value="a"> 
<!-- AJIT ^toggle' 的 值 是 布尔 值 true， 否 则 是 布尔 值 false --> 
<input type="checkbox" v-model="toggle"> 


<!-- 勾 选 时 “selected” 的 值 是 字符 串 abc--> 


<select v-model="selected"> 
<option value="abc">ABC</option> 


</select> 

有 时 我 们 会 有 动态 绑 定 Vuejs 实例 属性 的 需求 ， 这 时 可 以 使 用 v-bind 来 实现 这 个 需求 。 通 
过 v-bind 来 代替 直接 使 用 value 属性 ， 我 们 还 可 以 绑 定 非 字 符 串 的 值 ， 如 数值 、 对 象 、 数 组 等 。 
下 面 我 们 举例 看 看 在 各 form 表单 中 各 控件 如 何 使 用 该 指令 。 


1. checkbox 
<input 
type="checkbox" 
v-model="toggle" 
:true-value="a" 


:false-value="b"> 


O Aik checkbox IY, vm.toggle === vm.a. 
O 未 勾 选 checkbox IY, vm.toggle === vm.b. 


SE: :true-value 和 :人 false-value 只 适合 同一 个 checkbox 组 只 有 一 个 checkbox 的 情况 。 如 果 有 
多 个 checkbox ， 请 使 用 :value 进行 值 绑 定 。 代 码 示 例如 下 : 


<input type="checkbox" id="flash" :value="flash" v-model="bizLines"> 
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<label for="flash">{{ flash.name }}</label> 

<input type="checkbox" id="premium" :value-"premium" v-model="bizLines"> 
<label for="premium">{{ premium.name }}</label> 

<input type="checkbox" id="bus" :value="bus" v-model-"bizLines"» 

<label for="bus">{{ bus.name }}</label> 


<br> 


<span>Checked bizLines: {{ bizLines | json }}</span> 


data: { 


flash: (name: ' 快 车 '}， 


premium: (name: ' 专 车 '}， 


bus: (name: "巴士 ']， 


bizLines: [] 


2. radio 


<input type="radio" v-model="pick" :value="a"> 


2) radio IY, vm.pick === vm.a. 


3. select 
<select v-model="selected"> 
<option :value="{ number: 123 }">123</option> 
</select> 


用 户 勾 选 时 ，vm.selected === { number: 123}. 


5.3  v-model 修饰 指令 


v-model 用 来 在 视图 与 Model 之 间 同 步 数据 ， 但 是 有 时 候 我 们 需要 控制 同步 发 生 的 时 机 ， 
或 者 在 数据 同步 到 Model 之 前 将 数据 转换 为 Number 类型。 我 们 可 以 在 v-model 指令 所 在 的 form 
控件 上 添加 相应 的 修饰 指令 来 实现 这 个 需求 。 


5.3.1 lazy 


4g 


在 默认 情况 下 ，v-model 在 input 事件 中 同步 输入 框 的 值 与 数据 ， 可 以 添加 一 个 lazy 特性 
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从 而 改 到 在 change 事件 中 去 同步 。 代 码 示例 如 下 : 


<input v-model="msg" lazy><br/> 


{ {msg}} 


5.3.2 debounce 


设置 一 个 最 小 的 延 时 ， 在 每 次 襄 击 之 后 延 时 同步 输入 框 的 值 到 Model 中 。 如 果 每 次 更 新 都 
要 进行 高 耗 操作 例如， 在 输入 提示 中 AJAX 请 求 ) 时 ， 它 较为 有 用 。 代 码 示 例如 下 : 
<input v-model="msg" debounce="500"> 


用 户 输入 完毕 500ms Ja, vm.msg 才 会 被 更 新 。 


注 : 该 指令 是 用 来 延迟 同步 用 户 输入 的 数据 到 Model P, 并 不 会 延迟 用 户 输 入 事件 的 执行 。 
所 以 如 果 要 想 获取 变化 后 的 数据 , 我 们 应 该 用 vm.$watch0 来 监听 msg $65 X 46, 而 不 是 在 事件 中 
获取 最 新 数据 。 要 想 延 迟 DOM 事件 的 执行 ， 请 参阅 过 滤器 章节 中 的 debounce 过 滤器 。 


5.3.3 number 


当 传 给 后 端的 字段 类 型 必须 是 数值 的 时 候 , 我 们 可 以 在 v-model 所 在 控件 上 使 用 number 指 
令 ， 该 指令 会 在 用 户 输入 被 同步 到 Model 中 时 将 其 转换 为 数值 类 型 ， 如 果 转 换 结 果 为 NaN， 则 
对 应 的 Model 值 还 是 用 户 输入 的 原始 值 。 代 码 示例 如 下 : 


<input v-model="age" number» 
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不 少 人 应 该 都 会 对 如 何 实现 上 面 的 修饰 指令 感 兴趣 ， 我 们 来 看 一 下 源码 解析 部 分 。 


5.4.1 lazy 源码 解析 


所 有 的 表单 控件 都 绑 定 change， 只 是 在 不 设置 lazy 时 ， 默 认 绑 定 input。 源 码 定义 如 下 : 


<!-- 源 码 目录 : src/directives/public/model/text.js --» 


var lazy = this.params.lazy 
JE Ce NES 
this.on('change', this.rawListener) 


if (!lazy) { 
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this.on('input', this.listener) 


5.4.2 debounce 源码 解析 


FESE debounce fil filter 中 的 debounce 原理 相似 , 都 是 用 的 同一 个 函数 ,核心 都 是 setTimeout, 


只 是 debounce 没有 默认 的 wait 值 。 源 码 定义 如 下 : 


<!-- 源 码 目录 : src/directives/public/model/text.js --» 


import { 
debounce as debounce 


) from '../../../util/index' 


var debounce = this.params.debounce 

//. 

this.listener = this.rawListener = function () { 
Z 
self.set(val) 
//. 

} 

if (debounce) { 


this.listener =  debounce(this.listener, debounce) 


<!-- 源 码 目录 : src/util/lang.js --> 
export function debounce (func, wait) { 
var timeout, args, context, timestamp, result 
var later = function () { 
var last = Date.now() - timestamp 
if (last < wait && last >= 0) { 
timeout = setTimeout(later, wait - last) 
} else i 
timeout = null 
result - func.apply(context, args) 


if (!timeout) context = args = null 


} 
return function () { 


context = this 
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args = arguments 
timestamp = Date.now() 
if (!timeout) { 
timeout = setTimeout(later, wait) 
} 
return result 
} 
} 
5.4.3 number 源码 解析 
调用 util 里 面 的 toNumber 方法 。 源 码 定义 如 下 : 
<1!-- 源 码 目 录 : src/directives/public/model/text.js --> 
import { 
toNumber 
) from '../../../util/index' 
var number - this.params.number 
//. 
this.listener = this.rawListener = function () { 
if (composing || !self. bound) { 
return 
} 
var val = number || isRange ? toNumber(el.value) : el.value 


self.set (val) 
74 


<!-- 源 码 目录 : src/util/lang.js --» 


export function toNumber (value) { 
if (typeof value !== 'string') { 
return value 
lj else 1 
var parsed - Number (value) 


return isNaN(parsed) ? value : parsed 


第 日 总 


在 了 解 过 滤器 之 前 ， 我 们 需要 明确 一 个 概念 一 一 过 滤器 ， 本 质 上 都 是 函数 。 其 作 |} 
户 输入 数据 后 ， 它 能 够 进行 处 理 ， 并 返回 一 个 数据 结果 。Vuejs 与 AngularJs 中 的 过 滤器 语法 有 


些 相似 ， 使 用 管道 符 CD 进行 连接 。 代 码 示例 如 下 : 


{{'abc' | uppercase} } 


//'abc' => 'ABC' 


在 于 用 


这 里 使 用 了 Vue.js 内 置 的 过 滤器 uppercase， 将 字符 串 中 的 字母 全 部 转换 为 大 写 形式 。 


Vue.js 文 持 在 任何 出 现 表 达 式 的 地 方 添加 过 滤器 。 除 了 上 面 例 子 中 的 Mustache 风格 〈 双 大 


括号 ) 的 表达 式 之 外 ， 还 可 以 在 绑 定 指令 的 表达 式 后 调用 。 代 码 示 例如 下 : 


<span v-text-"message | uppercase"></span> 


表达 式 的 值 可 以 根据 用 户 的 输入 来 动态 改变 ， 也 可 以 像 abe 


样 采用 固定 值 。 


过 滤器 可 以 接受 参数 ， 人 参数 跟 在 过 滤器 名 称 后 面 ， 参 数 之 间 以 空格 分 隔 。 代 码 示例 如 下 : 


{{ message | filterFunction 'argl' arg2 }} 


需要 强调 的 是 ， 过 滤器 函数 将 始终 以 表达 式 的 值 作为 第 一 个 参数 。 带 引号 的 参数 会 被 当 作 


Ps 


一 个 参 


数 ,字符 串 arg] 作为 第 二 个 参数 , 表达 式 arg2 的 值 在 计算 出 来 之 后 


“ 符 串 处 理 ， 而 不 带 引 号 的 参数 会 被 当 作 数据 属性 名 来 处 理 。 这 里 ，message 将 作为 第 


作为 第 三 个 参数 传 给 


为 避免 混淆 ， 下 文中 传 入 的 参数 个 数 及 顺序 只 根据 过 滤器 后 跟 的 参数 来 统计 。 


熟悉 Linux shell 的 读者 可 能 对 其 中 的 管道 符 (o 的 作用 比较 了 解 ， 即 上 一 个 命令 的 输出 可 


以 作为 下 一 个 命令 的 输入 。Vuejs 过 滤器 中 的 管道 符 也 同样 支持 


这 种 方式 的 使 用 。 这 意味 着 


Vuejs 的 过 滤器 支持 链 式 调 用 ， 上 一 个 过 滤器 的 输出 结果 可 以 作为 下 一 个 过 滤器 的 输入 。 代 码 


示例 如 下 : 
<span>{{ 'ddfe' | capitalize| reverse}}</span> 
//-> ddfe’ => 'Ddfe' =>’ efdD' 
//capitalize 过 滤器 : 将 输入 字符 串 中 的 单词 的 首 字母 大 写 
//reverse 过 滤器 : 反 转 字符 串 顺序 
Vuejs 过 滤器 链 式 调用 的 特性 能 够 让 用 户 随心 所 欲 地 处 理 数 据 ， 这 种 将 各 种 功能 相对 独立 
的 过 滤器 函数 组 合 起 来 解决 复杂 数据 处 理 的 方式 与 软件 工程 中 的 “高 内 聚 、 低 耘 合 ” 设 计 思 想 
有 异曲同工 之 妙 。 结 合 后 文 将 要 介绍 的 Vuejs 强大 的 自 定义 过 滤器 的 功能 ， 用 户 可 以 非常 灵活 
地 对 数据 进行 处 理 ， 获 得 想 要 的 数据 形式 。 
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Vue.js 内 置 了 一 系列 常用 的 过 滤器 ， 可 以 直接 进行 调用 。 这 些 内 置 过 滤器 都 相对 比较 简单 ， 
如 果 要 实现 比较 复杂 或 者 需要 定制 的 过 滤 功 能 ， 还 是 要 借助 自 定 义 过 滤器 的 方式 。 当 然 ， 这 些 
内 置 的 过 滤器 使 用 时 无 须 定义 ， 比 较 适 合 刚 上 手 Vues 的 新 人 。 我 们 来 看 一 下 Vuejs 中 常用 的 
过 滤器 ， 如 图 6-1 所 示 。 


[ Vue.js 内 置 过 滤器 


字母 操作 限制 | json currency debounce 
capitalize limitBy 
uppercase filterBy 
lowercase orderBy 


图 6-1 Vue.js 内 置 的 常用 过 滤器 


6.1.1 字母 操作 


Vue.js 内 置 了 capitalize, uppercase. lowercase 三 个 过 滤器 用 于 处 理 英文 字符 。 注 : 这 三 个 
过 滤器 仅 针对 英文 字符 串 使 用 。 
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1. capitalize 
capitalize 过 滤器 用 于 将 表达 式 


{{ 'ddfe' | capitalize }} 


//'ddfe' => 'Ddfe! 
2. uppercase 
uppercase 过 滤器 用 于 将 表达 式 


{{ 'ddfe' | uppercase }} 


// 'ddfe' => 'DDFE' 


3. lowercase 


中 的 首 字 母 转换 为 大 写 形式 。 代 码 示例 如 下 : 


中 的 所 有 字母 转换 为 大 写 形式 。 代 码 示例 如 下 : 


lowercase 过 滤器 用 于 将 表达 式 


(( 'DDFE' | lowercase }} 


// 'DDFE' => 'ddfe' 


6.1.2 json 过 滤器 


的 所 有 字母 转换 为 小 写 形 式 。 代 码 示例 如 下 : 


Vue.js 中 的 json 过 滤器 本 质 | 


是 JSON .stringify() 的 精简 缩 略 版 ， 可 将 表达 式 的 值 转换 为 


JSON 字符 串 , 即 输出 表达 式 经 过 JSON .stringify0) 处 理 后 的 结果 。json 可 接受 一 个 类 型 为 Number 


的 参数 ， 用 于 决定 转换 后 的 JSON 
示例 如 下 : 


字符 串 的 缩 进 距离 ， 如 果 不 输入 该 参数 ， 则 默认 为 2。 代 码 


<pre>{{ didiFamily | json 4 }}</pre> 


/* 
以 四 个 空格 的 缩 进 打印 一 个 对 象 : 
didiFamily: 'name': 'ddfe', 'age': 3} 
=> 
{ 
'name': 'ddfe', 
age': 3 
} 
xy 
6.1.3 限制 


Vue.js PAS limitBy、filterBy、orderBy 三 个 过 滤器 用 于 处 理 并 


T 
El 


过 滤 后 的 数组 ， 比 
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如 与 v-for 搭配 使 用 。 注 意 ， 这 三 个 过 滤器 所 处 理 的 表达 式 的 值 必须 是 数组 ， 否 则 程序 会 报错 。 


1. limitBy 

limitBy 过 滤器 的 作用 是 限制 数组 为 开始 的 前 V 个 元 素 ， 其 中 N 由 传 入 的 第 一 个 参数 指定 。 
第 二 个 参数 可 选 ， 用 于 指定 开始 的 偏 移 量 ， 默 认为 0， 即 不 偏 移 。 如 果 第 二 个 参数 为 5， 则 表示 
从 数组 下 标 为 5 的 地 方 开始 计数 。 代 码 示例 如 下 : 


<!-- 只 显示 开始 的 10 个 元 素 --> 


<div v-for="item in items | limitBy 10"></div> 


<!-- 显示 第 5 到 15 个 元 素 --> 


«div v-for-"item in items | limitBy 10 5"»«/div» 
2. filterBy 


filterBy WUE ss HIE LRR I 其 第 一 个 参数 可 以 是 字符 串 或 者 函数 。 过 小 条 件 是 : "string 


|| function' + in + 'optionKeyName'. 


如 果 第 一 个 参数 是 字符 串 ， 那 么 将 在 每 个 数组 元 素 中 搜索 它 ， 并 返回 包含 该 字符 串 的 元 素 
组 成 的 数组 。 代 码 示 例如 下 : 
< div v-for-"item in items | filterBy 'hello'"></div> 
上 例 中 ， 只 显示 包含 hello 字符 串 的 元 素 。 

如 果 item 是 一 个 对 象 ， 过 滤器 将 递归 地 在 它 所 有 的 属性 
指定 一 个 搜索 字段 。 代 码 示例 如 下 : 
<div v-for-"member in didiFamily | filterBy 'ddfe' in 'name'"></div> 
上 例 中 ， 过 滤器 只 在 用 户 对 象 的 name 属性 中 搜索 ddfe。 最 好 始终 限制 搜索 范围 以 提高 效 
率 与 性 能 。 


搜索 。 为 了 缩小 搜索 范围 ， 可 以 


pam 
La. 


也 可 以 在 多 个 字段 中 进行 搜索 ， 字 段 与 字段 之 间 以 空格 分 隔 。 代 码 示 例如 下 : 
<li v-for-"user in users | filterBy 'Chris' in 'name' 'nickname'"»«/li» 

还 可 以 将 搜索 字段 存放 在 一 个 数组 中 ， 这 样 当 修改 搜索 字段 时 只 需 修改 数组 即 可 ， 无 须 再 
修改 View 层 。 代 码 示例 如 下 : 


<!-- fields = ['fieldA', 'fieldB'] --> 


<div v-for="user in users | filterBy searchText in fields"></div> 


-Eift ply Fath TESSA, TAM WSS BE AW Hb sud T ER. Sh 
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fr v-model， 我 们 可 以 轻松 地 实现 输入 提示 效果 。 代 码 示例 如 下 : 


<div id="dynamic-filter-by"> 
<input v-model="name"> 
«ul» 
<li v-for-"user in users | filterBy name in 'name'"» 
(( user.name }} 
«/li» 
«/ul» 


«/div» 


new Vue ({ 


el: '#dynamic-filter-by', 


data: { 
name: '', 
users: [ 
{ name: 'Bruce' }, 
{ name: 'Chuck' }, 
( name: 'Jackie' } 
] 
} 
} 
上 例 中 ， 根 据 输 入 框 中 用 户 输 入 的 数据 ， 可 以 实时 过 渡 出 包含 用 户 输入 的 字符 串 的 数组 元 


素 ， 十 分 高 效 、 简 洁 。 动 态 参数 作为 搜索 字段 的 方式 与 此 类 似 ， 不 再 费 述 。 


如 果 filterBy 的 第 一 个 参数 是 函数 , 则 过 滤器 将 根据 函数 的 返回 结果 进行 过 滤 。 此 时 filterBy 
过 滤器 将 调用 JavaScript 数组 中 内 置 的 函数 filter0 对 数组 进行 处 理 , 待 过 滤 数 组 中 的 每 个 元 素 都 
将 作为 参数 输入 并 执行 传 入 filterBy 中 的 函数 。 只 有 函数 返回 结果 为 true 的 数组 元 素 才 符 合 条 
件 并 将 存 入 一 个 新 的 数组 ， 最 终 返 回 结果 即 为 这 个 新 的 数组 。 


3. orderBy 

orderBy 过 滤器 的 作用 是 返回 排序 后 的 数组 。 过 滤 条 件 是 ;string || array |function' + ‘order 
20 为 升序 || order < 0 为 降序 '。 第 一 个 参数 可 以 是 字符 串 、 数 组 或 者 函数 。 第 二 个 参数 order 
可 选 ， 决 定 结果 为 升序 或 降序 排列 ， 默 认为 1， 即 升序 排列 。 


若 输 入 参数 为 字符 串 ， 则 可 同时 传 入 多 个 字符 串 作 为 排序 键 名 ， 学 符 串 之 间 以 空格 分 隔 。 


代码 示例 如 下 : 


<ul> 
<li v-for="user in users | orderBy 'lastName' 'firstName' 'age'"» 
(( user.lastName jJ) {{ user.firstName }} {{ user.age }} 
«/li» 


«/ul» 


此 时 将 按照 传 入 的 排序 键 名 的 先后 顺序 进行 排序 。 


也 可 以 将 排序 键 名 按照 顺序 放 入 一 个 数组 中 ， 然 后 传 入 一 个 数组 参数 给 orderBy 3: 
可 。 代 码 示 例如 下 : 


<!-- sortKey = ['lastName','firstName','age']--» 


<ul> 
<li v-for="user in users | orderBy sortKey"> 
(( user.lastName jJ) {{ user.firstName }} {{ user.age }} 
«/li» 


«/ul» 


过 滤器 即 


当 传 入 第 一 个 参数 为 函数 时 ,orderBy 过 滤器 与 JavaScript 数组 中 内 置 的 sortO 函 数 表 现 一 致 。 


注 : 事实 上 ， 当 传 入 参数 为 字符 串 或 者 数组 时 ， 最 终 调用 的 也 是 sort0 函 数 ， 只 不 过 Vuejs 
提前 作 了 一 些 处 理 ， 比 如 设置 了 默认 的 compare 函数 等 ， 根 据 传 入 的 compare 函数 进行 排序 。 
6.1.4 currency 过 滤器 

currency 过 滤器 的 作用 是 将 数字 值 转换 为 货币 形式 输出 。 其 第 一 个 参数 接受 类 型 为 String 
的 货币 符号 ， 如 果 不 输入 ， 则 默认 为 美元 符号 $。 第 二 个 参数 接受 类 型 为 Number 的 小 数位 ， 如 
果 不 输 入 ， 则 默认 为 2。 注意 ， 如 果 第 一 个 参数 采取 默认 形式 ， 而 需要 第 二 个 参数 修改 小 数位 ， 


则 第 一 个 参数 不 可 省 略 。 代 码 示例 如 下 : 


{{ amount | currency }} 


// 12345 => $12,345.00 
使 用 其 他 符号 ， 比 如 英镑 符号 ， 代 码 示 例如 下 : 


{{ amount | currency '£' jJ 


// 12345 -» £12, 345.00 
将 小 数位 调整 为 3 位 ， 代 码 示例 如 下 : 


{{ amount | currency '$' 3}} 


// 12345 -» $12,345.000 
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6.1.5 debounce 过 滤器 


debounce 过 滤器 的 作用 是 延迟 处 理 器 一 定 的 时 间 执 行 。 其 接受 的 表达 式 的 值 必须 为 函数 ， 
因此 其 一 般 与 von 等 指令 结合 使 用 。debounce 接受 一 个 可 选 的 参数 作为 延迟 时 间 , 单位 为 又 秒 。 
如 果 没 有 该 参数 ， 则 默认 的 延迟 时 间 为 300 毫秒 。 经 过 debounce 包装 的 处 理 器 在 调用 之 后 将 至 
少 延迟 设 定 的 时 间 再 执行 。 如 果 在 延迟 结束 前 再 次 调用 ， 则 延迟 时 长 将 重 置 为 设 定 的 时 间 。 通 
To 在 监听 用 户 input 事件 时 使 用 debounce 过 滤器 比较 有 用 , 可 以 防止 频繁 调用 方法 。debounce 
的 用 法 参考 如 下 : 


ml 


<input @keyup="onKeyup | debounce 500"» 
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大 多 数 情况 下 ，Vuejs 中 内 置 的 过 滤器 并 不 能 满足 我 们 的 需求 ， 好 在 Vuejs 还 提供 了 自 定 
义 过 滤器 的 API 供用 户 进 行 功能 扩展 。 在 学 习 Vuejs 自 定 义 过 滤器 之 前 ， 我 们 先 来 看 看 如 何在 
AngularJS 中 自 定义 过 滤器 。 代 码 示 例如 下 : 


angular.module('dd.filters', []) 


.filter('reverse', function (value) { 
return value.split('').reverse().join('') 
} 
<p>{{ msg | capitalize | reverse: '123' }}</p> 


<!-- 此 处 reverse 过 滤器 带 的 参数 '123 ' 并 不 起 作用 , 只 是 用 于 展示 AngularJs 的 过 滤器 接受 参数 的 书写 形式 --> 


Vue.js 中 自 定 义 过 滤器 的 语法 与 AngularJS 在 形式 上 相近 ， 但 是 语法 略 有 不 同 。 


6.2.1 fillter 语法 


TE Vue.js 中 也 存在 一 个 全 局 函数 Vue. filter 用 于 构造 过 滤器 : 
Vue.filter(ID, function () (]) 

该 函数 接受 两 个 参数 ， 其 中 第 一 个 参数 为 过 滤器 ID ， 作 为 用 户 自 定义 过 滤器 的 唯一 标识 ; 
第 二 个 参数 则 为 具体 的 过 滤器 函数 。 过 滤器 函数 以 值 为 参数 ， 返 回转 换 后 的 值 。 
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单个 参数 
一 个 名 为 reverse 的 过 滤器 ， 作 用 是 将 字符 串 反 转 输出 。 代 码 示例 如 下 : 


Vue.filter('reverse', function (value) { 


return value.split('').reverse().join(''); 


} 


<span v-text-"message | reverse"></span> 


<!-- 'abc' => 'cba' --> 
多 参数 


过 滤器 函数 除了 以 值 为 参数 外 ， 还 支持 接受 任意 数量 的 参数 ， 参 数 之 间 以 空格 分 隔 。 代 码 
示例 如 下 : 


Vue.filter('wrap', function (value, begin, end) { 


return begin + value + end 


} 


<span v-text-"message | wrap 'before' 'after'"></span> 


<!-- 'hello' => 'before hello after' --> 
3. 双向 过 滤器 


上 面 的 过 滤器 函数 都 是 在 Model 数据 输出 到 View 层 之 前 进行 数据 转化 的 ， 实 际 上 Vue.js 
还 支持 把 来 自视 图 (input 元 素 ) 的 值 在 写 回 模型 前 进行 转化 ， 即 双向 过 滤器 。 代 码 示例 如 下 : 


Vue.filter(id, { 


// model -> view 
// read 函数 可 选 


read: function(val) {}, 


// view -> model 
// write 函数 将 在 数据 被 写 入 Model 之 前 调 
// 两 个 参数 分 别 为 表达 式 的 新 值 和 旧 值 


write: function(newVal, oldVal) {} 


4， 动 态 参数 
filter 语法 还 有 一 个 需要 注意 的 点 : 动态 参数 。 如 果 过 小 器 参数 没有 用 引号 包 起 来 ， 则 它 会 
在 当前 vm 作用 域内 动态 计算 。 此 外 , 过 滤器 函数 的 this 始终 指向 调用 它 的 vms 代码 示例 如 下 : 
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<input v-model="userInput"> 


<span>{{msg | concat userInput}}</s 


pan> 


<!1-- 此 处 过 滤器 接受 的 参数 userInput 根据 
Vue.filter( 
// 
return value + input 


} 


'concat', function 


^input?! === "^this.userInput' 


6.2.2 ” 教 你 写 一 个 filter 


针对 常规 过 滤器 ，6.2.1 节 中 已 经 给 


户 输入 动态 计算 --> 


(value, input) { 


出 一 个 比较 简单 的 过 滤器 reverse 的 实现 ， 代 人 码 示例 如 下 : 


Vue.filter('reverse', function (value) { 
return value.split('').reverse().join(''); 
} 
需要 注意 两 点 : 
O 需要 给 定 过 滤器 一 个 唯一 标识 。 如 果 用 户 自 定义 的 过 滤器 和 Vue.js 内 置 的 过 滤器 冲突 ， 
CIEN IAEA. RUE 寺 滤 器 和 之 前 的 过 滤器 冲突 ， 则 之 
前 注册 的 过 滤器 层 被 履 盖 
O 过 滤器 函数 的 作用 是 输入 表达 式 的 值 ， 经 过 处 理 后 输出 。 因 此 ， 定义 的 函数 最 好 可 以 返 
回 有 意义 的 值 。 函 数 没 有 return 语句 不 会 报错 ， 但 这 样 的 过 滤器 没有 意义 。 
对 于 双向 过 滤器 ， 这 里 给 出 一 个 例子 供 参考 ， 代 码 示 例如 下 : 


<div id="example"> 
<p>{{ message }}</p> 
<input type-'text' 
</div> 
Vue.filter('filterExample', { 
read: function (val) { 
return "read. ' + val: 
), 
write: function(newVal, oldVal)( 
return oldVal + ' write'; 


)); 


var demo new Vue ({ 


v-model="message | 


filterExample" 


第 6 章 过 滤器 79 
el: '#example', 
data: { 
message: 'hello world' 
} 
)); 
在 初始 情况 下 ， 页 面 显示 如 图 6-2 Wr. message 表达 式 的 值 经 过 filterExample 中 的 read 


M ES BS 


数 处 理 ， 输 出 


到 View 


E CMT input HE! 
数 将 在 数据 输出 到 Model 层 之 前 处 理 , 这 里 将 返 
， 因 此 message 的 值 变更 为 hello world write' 并 显示 在 页 面 上 ， 如 图 


H| message 的 旧 值 


hello world 


read hello world 


read hello 


read hello world write 


图 6-2 ”初始 情况 


图 6-3 ”修改 input 框 中 message 的 值 


修改 message 的 值 时 ，filterExample 中 的 write 
'write', 然后 输 昌 
6-3 所 示 。 


上 到 Model 


6.3 ”源码 解析 
6.3.1 管道 实现 

为 了 让 过 滤器 的 调用 尽 可 能 简单 并 且 文 持 链 式 调用 等 特 
TE, Vuejs 背后 做 了 不 少 工 作 。 通 过 查看 源码 可 以 知道 ,管道 的 
实现 主要 借助 于 几 个 函数 ， 如 图 6-4 所 示 。 

管道 实现 的 原理 是 : Vue.prototype.$eval 接受 类 型 为 String 


的 后 跟 过 


CD, WRFE, N 


二 滤器 及 其 参 


参数 的 表达 式 (例如 'message | filterExample 
args1')， 运 用 正则 表达 式 检 测 传 入 的 字符 串 中 是 否 存 在 管道 符 
| 调用 parseDirective 函数 将 传 入 的 字符 串 整 理 
输出 为 一 个 对 象 。 例 如 ， 如 果 传 入 的 表达 式 为 a+ 1 | uppercase'， 


管道 实现 


Vue.prototype.Seval 
3 parseDirective 
— pushFilter 
processFilterArg 


Vue.prototype. applyFilters 


经 过 parseDirective 处 理 后 将 输出 为 如 下 形式 : 


{ 


expression: 


filters: [ 


( name: 


其 中 ，parseDirective 调用 了 pushFilter 和 processFilterArg 
过 滤器 函数 加 入 对 象 内 的 filters 数组 


ra 1, 


'uppercase', args: 


null } 


; 后 者 的 作用 是 检查 一 


6-4 ”管道 


i 实现 结构 图 


两 个 函数 。 前 者 的 作用 是 将 一 个 
个 参数 是 否 为 动态 参数 ， 并 且 去 
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掉 静 态 参 数 上 的 引号 。 


用 Vue.prototype. - 


/ 


好 的 对 象 之 后 ，Vue.prototype.$eval 将 调 


在 得 到 parseDirective 处 理 
数 ， 该 函数 将 表达 式 的 值 作 为 参数 输入 并 依次 调用 filters 数组 
过 滤器 的 效果 。 


applyFilters Pf 
最 后 输出 经 过 所 有 过 滤器 处 理 的 数据 结果 ， 达 到 链 式 调 | 
1， 在 此 不 再 贴 出 详细 的 实现 方式 。 


上 函数 在 Vue.js 源码 中 均 可 找 至 


以 
6.3.2 ”过 滤器 解析 


"MES 
AG 


x 


有 仪 节选 几 个 过 滤器 的 实现 源码 ， 不 排除 有 


能 。 这 上 
设计 编写 。 
1. capitalize 


function capitalize 

(!value && value !-- 0) 
value = value.toString() 

return value.charAt(0).toUpperCase() + value.slice(1) 


(value) { 


return 


IE 


} 


2. uppercase 
function uppercase (value) { 


return (value || value 
? value.toString ().toUpperCase () 


=== 0) 


3. lowercase 
function lowercase (value) { 
(value || value === 0) 


return 
? value.toString() .toLowerCase () 


6.4 ”常见 问题 解析 


filterBy/orderBy 过 滤 后 $index 的 索引 


1. 
filterBy 或 者 orderBy 对 表达 式 进 行 过 滤 时 ， 如 果 同 时 


在 使 用 


Vuejs 内 置 的 过 滤器 在 函数 实现 上 都 比较 简单 ， 读 者 应 该 也 能 够 很 轻松 地 实现 相应 
更 优 、 复 杂 度 更 低 的 实现 ， 读 者 可 


的 功 


Li /一 
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需要 将 $index 作为 参数 ， 此 时 


的 $index 将 会 根据 表达 式 数组 或 对 象 过 滤 后 的 值 进行 索引 。 代 码 示例 如 下 : 


<ul id="example"> 
<li v-for-"item in items | orderBy 'age' "> 
{{ item.message }}-{{Sindex}} 
</li> 
</ul> 


var example = new Vue({ 
el: '#example', 
datas + 
items: [ 
( message: ' 顺 风车 ',age: 1 }, 
( message: 租车 ', age: 10 }, 


di 
( message: 'RE',age: 6 } 


} 

// 最 终 显示 顺序 为 : 顺风 车 -0、 快 车 -1、 出 租车 -2 
2， 自 定义 fiter 的 书写 位 置 
自 定 义 filter 可 以 写 在 全 局 的 Yue 下 ， 代 码 示例 如 下 : 


Vue.filter('reverse', function (value) { 


return value.split('').reverse().join(''); 


} 


也 可 以 写 在 实例 当中 ， 代 码 示例 如 下 : 


var demo = new Vue(í 


el:’#demo’, 
data: {}, 
filters: { 
// Age filter 事件 的 位 置 


reverse:function(value)( 


return value.split('').reverse().join(''); 
} 


), 
methods:í] 


} 


二 者 本 质 上 并 无 区 别 ， 可 选择 一 种 使 用 。 但 是 采用 Vue-filter 时 ， 需 要 在 实例 化 Vue 对 象 前 
EX, FU AEH filter 将 不 起 作用 。 
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对 于 数据 绑 定 ， 一 个 常见 的 需求 是 操作 元 素 的 class 列表 和 和 它 的 内 联 样式 。 因 为 它们 都 是 
attribute， 我 们 可 以 用 v-bind 处 理 它们 : 只 需要 计算 出 表达 式 最 终 的 字符 串 。 不 过 ， 字 符 串 拼接 
麻烦 又 易 错 。 因 此 ， 在 v-bind 用 于 class 和 style 时 ，Vue.js 专门 增强 了 它 。 表 达 式 的 结果 类 型 


除了 字符 串 以 外 ， 还 可 以 是 对 象 或 数组 。 
7.1 ŻE HTML Class 


7.1.1 对 象 语 法 


我 们 可 以 传 给 v-bind:class 一 个 对 象 ， 以 动态 地 切换 class. 注意 ，v-bind:class 指令 可 以 与 普 


通 的 class 特性 共存 。 代 码 示例 如 下 : 


<div id='example' class-"static" v-bind:class-"( 'didi-orange': 


isNotRipe }"></div> 
var vm = new Vue({ 
el: 'example', 
data: { 
isRipe: true, 


isNotRipe: false 


HE: 


<div id='example' class="static didi-orange"></div> 


isRipe, 'didi-green': 


当 isRipe 和 isNotRipe 变化 时 ，class 列表 将 相应 地 更 新 。 例 如 ， 如 果 isNotRipe 变 为 true， 
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那么 class 列表 将 变 为 "static didi-orange didi-green"。( 当 然 ， 一 般 情 况 下 ，v-bind:class 绑 定 的 对 
象 中 只 有 一 个 class 会 生效 ， 这 取决 于 用 户 自己 的 设置 。) 


注 : 尽管 可 以 用 Mustache 标签 绑 定 class， 比 如 class="{{ className }}"， 但 是 我 们 不 推荐 
这 种 写法 和 v-bind:class 混用 。 


我 们 也 可 以 直接 绑 定 数据 中 的 一 个 对 象 ， 代 码 示例 如 下 : 


<div id-'example' v-bind:class="ddfe"></div> 


var vm = new Vue({ 
el: 'example', 
data: { 
ddfe: ( 
'didi-orange': true, 


'didi-green': false 


u 


a 


还 可 以 在 这 里 绑 定 一 个 返回 对 象 的 计算 属性 。 这 是 一 种 常用 且 


<div id-'example' v-bind:class="ddfe"></div> 


时 大 的 模式 。 代 码 示例 如 下 : 


var vm = new Vue ({ 
el: 'example', 
data: { 
didiAge:4, 
didiMember:6000 
} 
computed: { 
ddfe: function () { 
return { 
'didi-orange': this.didiAge>3 ? true: false, 


'didi-large': this.didiMember>1000 ? true: false 
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7.1.2 ”数组 语法 


我 们 可 以 把 一 个 数组 传 给 v-bind:class， 以 应 用 一 个 class 列表 。 代 码 示例 如 下 : 


<div id='example' v-bind:class-"[didiHandsome, didiBeautiful]"» 
var vm = new Vue({ 
el: 'example', 
data: { 
didiHandsome: 'didi-handsome', 


didiBeautiful: 'didi-beautiful' 


THERA: 
<div id='example' class="didi-handsome didi-beautiful"></div> 

如 果 想 根据 条 件 切 换 列表 中 的 class， 则 可 以 用 三 元 表达 式 。 代 码 示例 如 下 : 
<div id='example' v-bind:class-"[didiHandsome, isRipe ? didiOrange: '']"» 


此 例 始终 添加 didiHandsome， 但 是 只 有 在 isRipe 为 true 时 才 会 添加 didiOrange. 


不 过 ， 当 有 多 个 条 件 class MRSA EM. E Vuejs 1.0.19 及 以 后 版 本 中 ， 可 以 在 数组 
语法 中 使 用 对 象 语法 。 人 代码 示例 如 下 : 


<div id='example'  v-bind:class-"[didiHandsome, { didiOrange:  isRipe,  didiGreen: 
isNotRipe }] "> 


7.2 REAR 


7.2.4 ”对象 语法 


v-bind:style 的 对 象 语法 十 分 直观 一 一 看 着 非常 像 CSS， 其 实 它 是 一 个 JavaScript 对 象 。CSS 
属性 名 可 以 用 驼峰 式 (camelCase) 或 短 横 分 隔 命 名 (kebab-case)。 代 码 示 例如 下 : 


«div id='example' v-bind:style-"( color: didiColor, fontSize: fontSize + 'px' }"></div> 


var vm = new Vue({ 
el: 'example', 
data: { 


didiColor: 'orange', 
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fontSize: 30 


通常 直接 绑 定 到 一 个 样式 对 


更 好 ， 让 模板 更 清晰 。 代 码 示 例如 下 : 
«div id-'example' v-bind:style="ddfe"></div> 

var vm = new Vue({ 
el: 'example', 
data: { 


ddfe: 1 


color: orange, 


fontSize: '13px' 


同样 的 ， 对 象 语法 常常 结合 返回 对 象 的 计算 属 


出 号 
ES 
— 
refi 
= 
MT 


1. PRIS aN RUP: 
«div id='example' v-bind:style="ddfe"></div> 


var vm = new Vue({ 
el: 'example', 
datas. { 
didiAge:4, 


didiMember:6000 


computed: { 
ddfe: function()í 
return { 
color: this.didiAge»3 ? orange: 


: green, 
fontSize: this.didiMember>1000 ? 20px: 10px 


} 
} 


7.2.2 ”数组 语法 


到 一 个 元 素 上 。 代 码 示 例如 下 : 


v-bind:style 的 数组 语法 可 以 将 多 个 样式 对 象 应 月 


<div v-bind:style="[ddfe, 


didiFamily]"» 
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7.2.3 自动 添加 前 组 


当 v-bind:style 使 用 需要 厂商 前 级 的 CSS 属性 时 ， 如 transform, Vue.js 会 自动 侦 测 并 添加 相 
应 的 前 级 。 在 Vuejs 源码 中 采用 prefix 函数 来 完成 这 个 功能 ， 源 码 定义 如 下 : 
const prefixes = ['-webkit-', '-moz-', '-ms-'] 
const camelPrefixes - ['Webkit', 'Moz', 'ms'] 
function prefix (prop) { 


// hyphenate 函数 的 功能 是 将 驼峰 式 〈camelcase) 属性 


prop hyphenate (prop) 
// camelize BITE 


var camel 


camelize (prop) 


var upper 


if (!testEl) { 


testEl 
} 


var i 


prefixes.length 
var prefixed 

if (camel !== 'filter' && 
return { 


kebab: prop, 


camel.charAt (0) 


document.createElement ( 


转换 为 短 横 分 隔 式 (kebab-case) 


HBA) BK (kebab-case) 属性 转换 为 驼峰 式 〈camelcase) 


.toUpperCase() + camel.slice(1) 


'div') 


(camel in testEl.style)) { 


camel: camel 
} 
} 
while (i--) { 
prefixed = camelPrefixes[i] + upper 
if (prefixed in testEl.style) { 
return 1 
kebab: prefixes[i] + prop, 
camel: prefixed 
} 
} 
} 
} 
该 函数 的 基本 原理 是 检测 输入 的 属性 是 否 在 浏览 器 的 element.style 中 存在 ， 如 果 存 在 则 不 
作 变 动 ， 如 果 不 存在 ， 则 为 其 添加 浏览 器 私有 前 级 。 在 Vue.js 中 prefix 函数 的 实现 借鉴 了 著名 


= 
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HY paulirish 中 的 gimmePrefix 函数 的 实现 方式 : 


function gimmePrefix (prop) { 


var prefixes = ['Moz','Khtml','Webkit', 
elem= document.createElement('div'), 
upper = prop.charAt(0).toUpperCase() + prop. 
if (prop in elem.style) 
return prop; 
for (var len = prefixes.length; len--; ){ 
if ((prefixes[len] + upper) in elem.style) 
return (prefixes[len] + upper); 


} 


return false; 


二 者 的 区 别 在 于 Vue.js 中 的 prefix K 


加 友好 。 

需要 注意 的 是 , 对 于 “filter” 属 性 , Vue.js 
只 文 持 带 
这 个 无 前 级 属性 ， 因 此 ， 根 据 prefix 函数 的 原型 


属性 失效 。 为 了 修复 该 bug， 在 prefix 函数 中 ， 


webkit 前 级 的 版 本 即 -webkit-filter， 但 是 在 Chrome 的 element-style 中 却 含 有 
E, Vuejs 在 这 里 不 会 为 filter 添加 前 级 ， 导 致 该 
如 果 检 测 到 


'O','ms'], 


slice(1); 


函数 用 while 循环 代替 了 for 循环 ， 同 时 testEl 的 命名 更 


作者 表示 这 是 Chrome 浏览 器 的 一 个 bug: Chrome 


* filter" 


属性 是 filter， 则 也 为 其 添加 前 缀 。 


的 -moz-、IE 的 -ms-、Safari 和 Chrome 的 


此 外 ， 一 般 来 说 ， 浏 览 器 私有 前 绥 包 括 Firefox 
-Webkit-， 以 及 Opera 的 -o-， 但 是 Vue.js 只 添加 了 前 


面 三 种 前 级 ， 


这 是 读者 需要 注意 的 点 


ayo 


过 渡 效 果 在 交互 体验 中 的 习 


E 要 性 不 言 而 喻 。 以 往 我 们 使 


| jm 


配 CSS 中 定义 好 的 样式 ， 


不 过 这 一 套 方 法 仍 略 显 烦琐 。Vue,js 


自动 应 用 过 渡 效 果 。Vuejj 


] jQuery 添加 或 移 除 元 素 的 类 ， 搭 


再 引用 一 些 JavaScript 库 之 后 ， 可 以 做 出 非常 复杂 、 惊 艳 的 动态 效果 ， 


内 置 了 一 套 过 渡 系 统 , 可 以 在 元 素 从 DOM 中 插入 或 移 除 时 


js 会 在 适当 的 时 机 触发 CSS 过 渡 或 动画 ， 用 户 也 可 以 提供 相应 的 
JavaScript 钩子 函数 在 过 渡 过 程 中 执行 自 定 义 DOM 操作 。 


应 用 过 寸 渡 效 果 ， rf 


要 在 目标 元 素 上 使 用 transition 特性 。 


«div v-if-"show" transition="my-transition"></div> 


transition 特性 可 以 与 以 下 资源 一 起 搭配 使 用 : 


Q v-if 


O v-show 


O v-for〈 只 在 插入 和 删除 时 触发 ， 使 用 vue-animated-list 插件 ) 


O 动态 组 件 〈 见 “组 件 ” 一 草 ) 


O 在 组 件 的 根 节点 


当 插 入 或 者 删除 带 有 


代码 示例 如 下 : 


上 ， 并 且 被 Vue 实例 的 DOM 方法 (如 vm.$appendTo(el)) 触发 


transition 特性 的 元 素 时 ，Vue.js 将 执行 以 下 操作 : 


O 尝试 以 ID“my-transition” 查 找 JavaScript WHEAT WAR, AAG Vue.transition(id, 


hooks) 或 transitions 选项 注册 (后 文 将 介绍 )。 如 果 找 到 了 ， 将 在 过 渡 的 不 同 阶段 调用 


TUNER FY Fo 


O 自动 嗅 探 目 标 元 素 是 否 有 CSS 过 渡 或 动画 (按照 Vue.js 指定 的 方式 添加 类 名 即 可 )， 并 
在 合适 时 添加 /删除 CSS 类 名 ， 免 去 了 用 户 自己 进行 相关 操作 的 烦琐 。 


O 如果 没有 找到 JavaScript TIF AAA RE CSS 过 渡 / 动 画 ，DOM 操作 (插入 / 删 
ERO 将 在 下 一 帧 中 立即 执行 。 


8.1 CSS 过 渡 


Vue.js 为 用 户 定义 了 一 套 规则 用 于 很 方便 地 启用 CSS 过 渡 , 上 典型 的 CSS 过渡 代 码 示例 如 下 : 


<div v-if="show" transition="expand">hello</div> 


然后 为 .expand-transition、.expand-enter 和 .expand-leave 添加 CSS 规则 , 这 样 Vue.js 就 会 在 
相应 的 阶段 检测 相应 的 CSS 类 的 存在 并 及 时 添加 和 删除 。 添 加 CSS 样式 的 代码 示例 如 下 : 


/* 必需 */ 


.expand-transition { 
transition: all .3s ease; 
height: 30px; 
padding: 10px; 
background-color: #eee; 


overflow: hidden; 


/* .expand-enter 定义 进入 的 开始 状态 */ 
/* .expand-leave 定义 离开 的 结束 状态 */ 


.expand-enter, .expand-leave { 
height: 0; 
padding: 0 10px; 
opacity: 0; 


可 以 在 同一 个 元 素 上 通过 动态 绑 定 实现 不 同 的 过 渡 ， 代 码 示例 如 下 : 


«div v-if="show" :transition="transitionName">hello</div> 
new Vue ({ 

eles, tose fy 

data: { 


show: false, 
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transitionName: 'fade' 


除 此 之 外 ， 还 可 以 提供 JavaScript 钩子 函数 ， 以 下 为 简单 示例 ， 其 具体 语法 见 8.2 市 。 


Vue.transition('expand', { 

beforeEnter: function (el) { 
el.textContent = 'beforeEnter' 

), 

enter: function (el) { 
el.textContent = 'enter' 

), 

afterEnter: function (el) { 
el.textContent - 'afterEnter' 

), 

enterCancelled: function (el) { 

), 

beforeLeave: function (el) { 
el.textContent - 'beforeLeave' 

), 

leave: function (el) { 
el.textContent - 'leave' 

), 

afterLeave: function (el) { 
el.textContent - 'afterLeave' 

), 

leaveCancelled: function (el) { 

} 

} 


8.1.1 内 置 Class 类 名 


类 名 的 添加 以 及 切换 取决 于 transition 特性 的 值 ， 例 如 transition = 'boom'， 会 有 三 个 内 置 类 


O .boom-transition， 始 终 保留 在 元 素 上 。 


O .boom-enter， 定 义 进 入 过 渡 的 开始 状态 。 只 应 用 一 帧 ， 然 后 立即 删除 。 


M 


O .boom-leave， 定 义 离开 过 渡 的 结束 状态 。 在 离开 过 渡 开 始 时 生效 ， 在 它 结束 后 删除 。 


rT 
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值得 注意 的 是 ， 如 果 transition 没有 指定 值 ， 即 id 为 空 ， 则 使 用 默认 类 名 : .v-transition、 


.v-enter. .v-leave. 


8.1.2 HEX CSS 类 名 


用 户 可 以 在 过 渡 的 JavaScript 中 声明 自 定义 的 CSS 过 渡 类 名 。 这 些 自 定义 的 类 名 会 覆盖 默 
认 的 类 名 。 当 需要 和 第 三 方 的 CSS 动画 库 如 Animate.css 配合 时 会 非常 有 用 。 代 码 示例 如 下 : 


«div v-show-"ok" class="animated" transition="bounce">Watch me bounce</div> 


Vue.transition('bounce', { 
enterClass: 'bounceInLeft', 
leaveClass: 'bounceOutRight' 

} 


SE: 此 特性 在 Vue.js 1.0.14 版 本 中 是 新 增 的 。 


8.1.3 显 式 声明 CSS 过 渡 类 型 


Vue.js 需要 给 过 渡 元 素 添加 事件 侦 听 器 来 侦 听 过 渡 何 时 结束 。 基 于 所 使 用 的 CSS， 该 事件 
要 么 是 transitionend， 要 么 是 animationend。 如 果 用 户 只 使 用 了 两 者 中 的 一 种 ， 那 么 Vue.js 将 
够 根据 生效 的 CSS 规则 自动 推测 出 对 应 的 事件 类 型 。 但 是 ， 在 有 些 情况 下 ， 一 个 元 素 可 能 需 
同时 带 有 两 种 类 型 的 动画 。 比 如 用 户 可 能 希望 让 Vue.js 来 触发 一 个 CSS 动画 ， 同 时 该 元 素 在 鼠 
标 悬 浮 时 又 有 CSS 过 渡 效 果 。 在 这 样 的 情况 下 ， 用 户 需 要 显 式 地 声明 希望 Vue.js 处 理 的 动画 类 
型 (animation 或 transition )， 代 码 示例 如 下 : 


Vue.transition('bounce', { 
// 该 过 渡 效 果 将 只 侦 听 “animationend” 事件 
type: 'animation' 

} 


SE: 此 特性 在 Vue.js 1.0.14 版 本 中 是 新 增 的 。 


8.1.4 动画 案例 


CSS 动画 的 用 法 同 CSS 过 渡 , 区 别 是 在 动画 中 v-enter 类 名 在 节点 插入 DOM 后 不 会 立即 删 
除 ， 而 是 在 animationend 事件 触发 时 删除 。 如 果 要 运用 JavaScript 过 渡 中 的 钩子 孔 数 ， 正 如 上 一 
节 所 述 ， 需 要 显 式 地 将 传 入 的 hooks 对 象 中 的 type 属性 设置 为 animation。 代 码 示 例如 下 : 


<!-- 为 简便 起 见 ， 省 略 了 animation Fl transform 等 兼容 性 前 级 --> 


<span v-show-"show" transition="bounce">Look at me!</span> 
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.bounce-transition { 


display: i 
} 


nline-block; /* 否则 scale 动画 不 起 作用 */ 


-bounce-enter { 


animation: 


} 


bounce-in .5s; 


-bounce-leave { 


animation: 


} 


bounce-out .5s; 


@keyframes bounce-in { 


0$ { 


transform: scale(0); 


transform: scale(1.5); 


} 
100% { 


transform: scale(1); 


} 


Gkeyframes bounce-out { 


0$ ( 


transform: scale(1); 


transform: scale(1.5); 


} 
100% { 


transform: scale(0); 


8.1.5 “过 湾流 程 


我 们 以 如 下 的 结构 为 例 来 说 明 Vue.js 内 部 是 如 何 处 理 过 渡 的 : 


<div v-show- 


当 show 


"show" transition-""»Transition example</div> 


属性 改变 时 , Vue.js 将 相应 地 插入 或 删除 <div> 元 素 , 按照 如 下 规则 改变 过 渡 的 CSS 
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类 名 《以 下 每 一 项 在 用 


户 没 有 设置 时 都 将 会 跳 过 ): 


O 如 果 show 2% false, Vue.js 将 : 


» 


调用 beforeLeave 钩子 ; 


> 将 v-leave 类 名 添加 到 元 素 上 以 触发 过 渡 ， 


» 


» 


» 


» 


调用 leave £3-T 


等 街 过 渡 结束 (监听 transitionend 事件 ); 


M DOM 4 


调用 afterLeave 钩子 。 


删除 元 素 并 删除 v-leave 类 名 ; 


O 如果 show 4A true, Vue.js 将 : 


» 


调用 beforeEnter 钩子 ; 


> 将 v-enter 类 名 添加 到 元 素 上 ; 


> 


> 


> 


> 


> 


Wed 


强制 一 次 CSS 布局 ， 让 v-enter 确实 生效 。 然 后 删除 v-enter KA, Uf AE, [ul 


H. 


调用 enter 44; 


fA DOM 中 ; 


到 元 素 的 原始 状态 ; 


等 待 过渡 结束 ; 


调用 afterEnter 钩子 。 


另外 ， 如 果 进 入 过 渡 还 在 进行 
enter 创建 的 计时 器 ， 反之， 对 于 离开 过 渡 也 是 如 此 。 


Ei 


上 面 所 有 


最 后 ，enter F 
必 等 待 CSS transitionend #44 


的 钩子 函数 在 调 


时 删除 元 素 ， 将 调用 enterCancelled 钩子 ， 以 清理 变动 或 


Ji, "CHITI this 均 指 向 其 所 属 的 Vue 实例 。 编 
在 哪个 上 下 文中 编译 ， 它 的 this 就 指向 哪个 上 下 文 。 


译 规则 为 ， 过 渡 


I leave 可 以 有 第 二 个 可 选 的 回调 参数 ， 用 于 显 式 控制 过 渡 如 何 结束 。 因 此 不 
F, Vuejs 将 等 竺 用 户 手工 调用 这 个 回调 函数 ， 以 结 


束 过 渡 。 代 码 示 
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例如 下 : 
enter: function (el) { 
// 没有 第 二 个 参数 
// ECSS transitionend 事件 决定 过 渡 何 时 结束 
} 
enter: function (el, done) { 
// 有 第 二 个 参数 
// 过 渡 只 有 在 调用 “done ”时 结束 


注 : 当 多 个 元 素 一 起 过 渡 时 ，Vue. 


8.2 JavaScript WIE 


也 可 以 
和 leave 钩子 需要 调 | 


建议 只 使 用 JavaScript YF I, 为 
测 。 这 样 也 会 防止 CSS 规则 对 过 渡 的 了 


只 使 用 JavaScript HF, 不 用 定义 任 
] done 回调 ， 否 则 它们 将 被 同步 


js 会 批量 处 理 ， 只 强制 一 次 布局 。 


可 CSS 规则 。 当 只 使 用 JavaScript 过 渡 时 ，enter 
HH, 过渡 将 立即 结束 。 


JavaScript 过 渡 显 式 声 明 css: false, Vue.js 将 跳 过 CSS 检 
F 扰 。 


我 们 使 用 jQuery 来 注册 一 个 


{ 


Vue.transition('fade', 
css: false, 
enter: { 
// 元 素 
// 在 动 
$ (el) 


.css('opacity', 


function (el, 
已 被 插入 Dom 中 
画 结 束 后 调用 


done) 


done 
0) 
.animate(( opacity: 1 }, 1000, 
), 
enterCancelled: 

$ (el).stop() 
), 
leave: 

// 5 enter 相同 

$(el).animate(( opacity: 
), 


leaveCancelled: 


(el) ( 


function 


function (el, done) { 


0 hy 
(el) 


{ 


function 


1000, 


自 定义 的 JavaScript 过 渡 ， 代 码 示例 如 下 : 


done) 


done) 


$ (el).stop() 


然后 在 transition 特性 中 声明 ， 代 码 示 例如 下 : 
<p transition="fade"></p> 
完整 地 注册 一 个 JavaScript 过 渡 的 代码 示例 如 下 : 


Vue.transition(ID, { 


了 


enter: function () {}, 


leave: function () 


} 


Vue.transition 方法 接受 两 个 参数 ， 其 中 第 一 个 参数 是 过 渡 ID， 作 为 用 户 自 定义 的 transition 
的 唯一 标识 ;第 二 个 参数 是 一 个 对 象 hooks. hooks 必须 含有 enter 和 leave 两 个 类 型 为 function 
的 属性 。 这 便 是 最 基本 的 一 个 JavaScript 过 渡 。 除 此 之 外 ，hooks 还 可 以 包含 其 他 属性 ， 代 码 示 
例如 下 : 
{ 


type: 'animation' 


css: true, 

enterClass: 'bounceInLeft', 
leaveClass: 'bounceOutRight' 
beforeEnter: function (el) Hs 
enter: function (el) {}, 
afterEnter: function (el) {}, 
enterCancelled: function (el) {}, 
beforeLeave: function (el) is 
leave: function (el) {}, 


afterLeave: function (el) {}, 


leaveCancelled: function (el) () 


stagger: function(index)(] 


注 : 以 上 只 是 列 出 hooks 对 象 可 以 设置 的 属性 ， 不 代表 所 有 属性 都 需要 被 设置 ， 属 性 的 值 
也 仅 供 参考 ,而 且 有 些 属性 存在 互 斥 关系 ,比如 设置 了 css 值 为 false 时 , enterClass 5 leaveClass 
的 设置 将 无 效 。 各 属性 的 含义 可 见 其 他 各 节 ， 或 者 查阅 Vue.js EZ XH. 


8.3 PÆLE 


transition 与 v-for 一 起 使 用 时 可 以 创建 渐进 过 渡 ， 即 让 v-for 中 的 每 个 过 渡 项 目 可 以 依次 产 
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生 过 渡 效 果 ， 而 不 是 一 次 性 同步 产生 过 渡 效 果 。 给 过 渡 元 素 添 加 一 个 特性 stagger, enter-stagger 
或 leave-stagger〈 以 毫秒 作为 单位 )， 分 别 可 以 控制 每 个 过 渡 项 目的 延迟 时 间 、 进 入 时 的 延迟 时 
间 以 及 离开 时 的 延迟 时 间 。 我 们 来 看 看 如 何 为 列表 元 素 添加 渐进 过 渡 效 果 。 代 码 示 例如 下 ; 


«div v-for-"item in list" transition-"myStaggeredTransition" stagger="100"></div> 


.nyStaggeredTransition-transition { 
transition: all .5s ease; 
overflow: hidden; 
margin: 0; 
height: 20px; 
} 
.nyStaggeredTransition-enter, .myStaggeredTransition-leave { 
opacity: 0; 
height: 0; 


或 者 提供 一 个 钩子 stagger, enter-stagger 或 leave-stagger， 以 更 好 地 控制 。 代 码 示例 如 下 : 


Vue.transition('myStaggeredTransition', { 


stagger: function (index) { 
// 每 个 过 渡 项 目 增加 50ms 延 时 
// 但 是 最 大 延 时 限制 为 300ms 
return Math.min(300, index * 50) 


gO x 
Method 


Vue.js 的 事件 监听 一 般 都 通过 v-on 指令 配置 在 HTML F, 虽然 也 可 以 在 JavaScript 代码 中 使 
用 原生 addEventListener 方法 添加 事件 监听 ， 但 Vuejs 本 身 并 不 提倡 如 此 。 看 上 去 这 种 方式 不 符 
合 传统 的 “关注 点 分 离 ”(separation of concern) 的 理念 ， 但 其 实 所 有 的 Vue.js 事件 处 理 方法 和 表 
达 式 都 严格 绑 定 在 当前 视图 的 ViewModel Ko KERE, 采用 它 提 供 的 v-on 指令 有 如 下 几 点 好 处 : 


O 通过 查看 HTML 模板 便 能 轻松 定位 JavaScript 代码 中 对 应 的 方法 。 


O 无 须 在 JavaScript 中 手动 绑 定 事件 ，ViewModel 和 DOM EMR E TMAR. 


O 当 一 个 ViewModel 被 销毁 时 ， 所 有 的 事件 处 理 器 都 会 自动 被 删除 。 


9.1 “如何 绑 定 事件 


在 原生 DOM 事件 中 ， 我 们 可 以 通过 JavaScript 给 HTML 文档 元 素 注 册 不 同 的 事件 处 理 程 
序 。 代 码 示例 如 下 : 
<button onclick="learnVue () ">DDFE</button> 

AngularJS 也 采取 了 类 似 的 方式 ， 只 不 过 换 成 了 ng- 前 绥 的 事件 指令 : 
<button ng-click-"learnBue()"»DDFE«/button» 


类 似 的 ，Vuejs 也 采取 了 这 样 的 方式 来 绑 定 事件 ， 下 面 进行 详细 介绍 。 


9.1.1 ARASH 


Vue.js 在 HTML 文档 元 素 中 采用 v-on 指令 来 监听 DOM 事件 ， 代 码 示例 如 下 : 


<div id="example"> 


98 . Vuejs 权威 指南 


<button v-on:click="greet">Greet</button> 


«/div» 


TE: 此 处 语法 以 Vuejs 1.0 版 本 为 准 ，0.12 版 本 与 1.0 版 本 的 区 别 见 9.3 节 。 


这 里 将 一 个 单 击 事件 处 理 器 click 绑 定 到 greet 方法 ， 该 方法 在 Vue 实例 中 进行 定义 。 


在 这 种 内 联 方式 下 一 个 事件 处 理 器 只 能 绑 定 一 个 方法 ， 如 需 绑 定 多 个 方法 ， 仍 需 在 
JavaScript 代码 中 使 用 addEventListener 方法 来 绑 定 。 


同样 的 ， 类 似 于 原生 JavaScript 以 及 AngularJS， 除 了 直接 绑 定 到 一 个 方法 外 ， 也 可 以 直接 
使 用 内 联 JavaScript 语句 。 代 人 码 示 例如 下 : 


<div id-"example-2"» 


<button v-on:click="say('hi')">Say Hi</button> 
<button v-on:click="count = count + 1">Say What</button> 


</div> 


与 内 联 表 达 式 相仿 ， 事 件 处 理 器 限制 为 一 个 JavaScript 语句 。 


9.1.2 methods 配置 


在 上 一 节 中 ， 当 用 户 将 click 事件 与 某 个 方法 绑 定时 ， 需 要 在 Vue 实例 当中 进行 定义 ， 所 有 
定义 的 方法 都 放 在 methods 属性 下 。 针 对 上 一 节 的 greet 方法 定义 代码 示例 如 下 : 


var vm = new Vue({ 


el: '#example', 
// 在 methodqs ”对 象 中 定义 方法 
methods: { 


greet: function (event) 
// 方法 内 this ”指向 vm 
alert('Welcome to Vue.js By DDFE!') 


// event 是 原生 pom 事件 


alert(event.target.tagName) 


} 
} 


// 也 可 以 在 JavaScript 代码 中 调用 方法 


vm.greet() 
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对 于 say 方法 ， 可 按照 如 下 方式 定义 : 
new Vue ({ 


el: '#example-2', 


methods: { 
Say: function (msg) { 
alert (msg) 
} 


与 事件 绑 定 的 方法 支持 参数 event 即 原生 DOM 事件 的 传 入 。 


需 
O methods 中 定义 的 方法 内 的 this 始终 指向 创建 的 Vue 实例 。 
Q 
Q 


T 


方法 用 在 普通 元 素 上 时 ， 只 能 监听 原生 DOM 事件 ; 用 在 自 定义 元 素 组 件 上 时 ， 也 可 以 
监听 子 组 件 触发 的 自 定义 事件 〈 详 见 “组 件 ” 一 章 )。 


9.1.3 $events 应 用 


在 上 一 节 中 ,在 Vue 实例 中 创建 的 方法 需要 访问 原生 DOM 事件 时 可 以 直接 传 入 event 来 获 
取 。 如 果 在 内 联 语句 处 理 器 中 需要 访问 原生 DOM 事件 时 ， 则 可 以 用 一 个 特殊 变量 gevent 将 其 
传 入 方法 中 。 代 码 示 例如 下 : 


<button v-on:click-"say('hello!', Sevent) ">Submit</button> 
Tires 
methods: { 
say: function (msg, event) { 
// 现在 我 们 可 以 访问 原生 事件 对 象 
event.preventDefault () 
} 


9.2 ”如 何 使 用 修饰 得 


在 第 3 章 “ 指 令 ” 中 提 过 ， 修 饰 符 (modifiers〉 是 以 半角 句号 〈.〉 开 始 的 特殊 后 级 ， 用 于 


AL’ 


表示 指令 应 当 以 特殊 方式 绑 定 。 在 事件 处 理 器 上 ，Vue.js 为 v-on 提供 了 4 个 事件 修饰 符 
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即 .prevent、.stop、.capture 与 .self， 以 使 JavaScript 代码 负责 处 型 
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纯粹 的 数据 逻辑 ， 而 不 用 处 理 


这 些 DOM 事件 的 细节 。Vue.js 还 为 v-on 添加 了 按键 修饰 符 ， 用 于 监听 键盘 事件 。 


在 使 用 方式 上 ， 


Juni 
pui 
Dn 


有 件 修饰 符 可 以 串联 ， 代 码 示例 如 下 : 


<a v-on:click.stop.prevent="doThat"> 
也 可 以 只 有 修饰 符 而 不 绑 定 事件 ， 代 码 示 例如 下 : 
<form v-on:submit.prevent></form> 


Has 事件 修饰 符 与 按键 修饰 符 均 为 Vue.js 1.0 版 本 增加 的 特性 ，0.12 版 本 无 法 使 用 。 


9.2.1 prevent 


在 事件 处 理 器 中 经 常 需要 调用 event.preventDefault0 来 阻止 事 件 的 默认 行为 ，Vue.js 提供 


了 .prevent 事件 修饰 符 以 使 之 在 HTML 中 便 能 完成 操作 。 代 码 示例 如 下 : 


«i-- 提交 事件 不 再 重 载 页 面 --> 


<form v-on:submit.prevent="onSubmit"></form> 
p 


9.2.2 stop 


除了 event.preventDefault(), } 


Vue.js 也 提供 了 相应 的 .stop 事件 修饰 符 。 代 码 示例 如 下 : 
<!-- 阻止 单 击 事件 冒 泡 --> 


«a v-on:click.stop="doThis"></a> 


9.2.3 ca 


capture 事件 修饰 
有 获 模式 。 代 码 示 例如 下 : 


i 


pture 


<div v-on:click.capture="doThis">...</div> 


9.2.4 se 


self 3&4] 


If 


符 是 Vue.js 1.0.16 版 本 中 新 增 的 ， 表 示 添 加 事 人 


于 阻止 事件 冒 泡 的 event.stopPropagation() 也 经 常 被 调用 


F 侦 听 器 时 采用 capture 即 


修饰 符 同 样 是 Vuejs 1.0.16 版 本 中 新 增 的 ， 表 示 只 当 寻 


子 元 素 ) 触发 时 触发 回调 。 代 码 示例 如 下 : 


«div v-on:click.self="doThat">...</div> 


EH 


FE 该 元 素 本 里 (而 不 是 
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9.2.5 ”按键 


监听 键盘 事件 经 常 需要 检测 keyCode. Vue.js 可 以 为 v-on 添加 键盘 修饰 符 ， 代码 示例 如 下 : 


<!-- 只 有 在 keyCode 是 13 时 调用 vm.submit()--> 


<input v-on:keyup.13="submit"> 


鉴于 记 住 所 有 的 keyCode 比较 困难 ，Vuejs 为 常用 的 按键 提供 了 别名 。 代 码 示例 如 下 : 


<!-- 同上 --> 
<input v-on:keyup.enter="submit"> 
<!-- 缩写 语法 ， 详 见 下 一 节 --> 

<input Gkeyup.enter-"submit"» 


完整 的 按键 别名 如 下 : 


enter (keycode:13) 
tab (keycode:9 ) 
delete (keycode:8,46 ) 


esc (keycode:27) 


Q 

Q 

O 

O 

O space (keycode:32) 
O up (keycode:38) 
O down (keycode:40) 
O left Ckeycode:37) 
O 


right (keycode:39 ) 


9.3 Vue.js 0.12 到 1.0 中 的 变化 


Vue.js 从 0.12 版 本 到 当前 最 新 的 1.0 版 本 经 历 Ie 


增 的 内 容 包括 事件 修饰 符 和 按键 修饰 符 。 除 此 之 外 ， 


9.3.1 v—on 变更 


在 Vue.js 0.12 版 本 中 ，v-on 绑 定 事件 


的 


«a v-on="click: myFunction"> 触 发 一 个 方法 函 


BEP: 


数 </a> 


& 体 到 本 章 内 容 ，1.0 版 本 新 


还 有 以 下 两 点 i 


看 法 上 的 变动 。 
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而 在 1.0 版 本 中 作 了 一 些 改动 : 

«a v-on:click="myFunction"> 触 发 一 个 方法 函数 </a> 

有 鉴于 此 ，0.12 版 本 中 多 重 指 令 从 句 的 形式 在 1.0 版 本 中 也 不 再 提供 : 
<!==0.12 版 本 ， 多 重 指令 从 名 ==> 


<div v-on=" 


click : onClick, 

keyup : onKeyup, 

keydown : onKeydown 
"> 


</div> 


«1221.0 版 本 中 必须 分 开 绑 定 ==> 


<div v-on:click-"onClick"v-on:keyup-"onKeyup" v-on:keydown-"onKeydown"» 


«/div» 


9.3.2  Qclick 缩写 


Vue.js 在 1.0 版 本 中 为 v-on 提供 了 缩写 形式 ， 在 0.12 版 本 中 则 无 法 使 用 : 


<!-- 完整 语法 --> 


«a v-on:click="doSomething"></a> 


<!-- 缩写 --> 


<a @click="doSomething"></a> 


* LO s 


Vue 实例 万 法 


本 章 我 们 介绍 Vue 实例 提供 的 一 些 有 用 的 属性 和 方法 ,这 些 属性 和 方法 名 都 以 前 级 $ 开 头 。 


10.1 ”实例 属性 


在 详细 讲解 每 个 忆 


gm 


组 件 树 访问 DOM 访问 


$parent $el 
$root $els 
$children 

$refs 


性 的 使 用 之 前 ， 我 们 先 看 一 下 属性 


总 览 图 ， 如 图 10-1 Aras. 


数据 访问 
$data 


$options 


图 10-1 ”Vue 实例 属性 总 览 


10.1.1 ”组件 树 访问 


1. $parent 
用 来 访问 当前 组 伯 


2. $root 


F 实 例 的 父 实 例 。 


用 来 访问 当前 组 作 


F 树 的 根 实 例 ， 如 果 当 前 组 们 


£ 


^ 


^ 


SEP, Sroot 表示 当前 组 件 实例 本 身 。 
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3. $children 
用 来 访问 当前 组 件 实例 的 直接 子 组 件 实例 。 
4. $refs 


用 来 访问 使 用 了 v-ref 指令 的 子 组 件 。v-ref 的 详细 介绍 请 参阅 3.1.11 市 。 


10.1.2 DOM 访问 


1. $el 
用 来 访问 挂 载 当 前 组 件 实例 的 DOM 元 素 。 
2. $els 


用 来 访问 $el 元 素 中 使 用 了 v-el 指令 的 DOM 元 素 。v-el 的 详细 介绍 请 参阅 3.1.12 节 。 


10.1.3 ”数据 访问 


1. $data 
用 来 访问 组 件 实例 观察 的 数据 对 象 ， 该 对 象 引用 组 件 实例 化 时 选项 中 的 data 属性 。 


2. $options 
用 来 访问 组 件 实例 化 时 的 初始 化 选项 对 象 。 


10.2 ”实例 方法 


10.2.1 实例 DOM 方法 的 使 用 


在 详细 讲解 每 个 方法 的 使 用 之 前 ， 我 们 先 看 一 下 方法 总 览 图 ， 如 图 10-2 所 示 。 


内 部 插入 同 级 插入 删除 延迟 
$appendTo $after $remove $nextTick 
$before 


图 10-2”Vue 实 例 DOM 方 法 总 览 
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1. $appendTo() 


$appendTo() 方 法 用 来 将 el 所 指 的 DOM 元 素 或 片段 招 


该 方法 接受 两 个 参数 : 


入 到 目标 元 素 中 。 


O elementOrSelector (字符 串 或 DOM 元 素 )， 该 参数 可 以 是 一 个 选择 器 字符 串 或 者 DOM 


元 素 。 


O callback (可 选 , KZO, 回调 函数 , 该 回调 


YE: 如 果 在 el 上 应 用 了 过 


2. $before() 


函数 会 在 el 元 素 被 插入 到 目标 元 素 后 被 触发 。 
渡 效 果 ， 则 回调 会 在 过 渡 完 成 后 被 触发 。 


$before() 方 法 用 来 将 el 所 指 的 DOM 元 素 或 片段 插入 到 目标 元 素 之 前 。 


该 方法 接受 两 个 参数 : 


> A 中 


O elementOrSelector CH 
元 素 。 


或 DOM 元 素 )， 该 参数 可 以 是 一 个 选择 器 字符 串 或 者 DOM 


O callback (可 选 , 函数 ), 回调 函数 , 该 回调 函数 会 在 el 元 素 被 插入 到 目标 元 素 后 被 触发 。 


ik: 如 果 在 el 上 应 用 了 过 
3. $after() 


$after() 方 法 用 来 将 el 所 指 的 DOM 元 素 或 片段 操 


该 方法 接受 两 个 参数 : 


27 Ar A 


O elementOrSelector (FIF P 
元 素 。 


渡 效 果 ， 则 回调 会 在 过 渡 完 


后 被 触发 。 


入 到 目标 元 素 之 后 。 


BEL DOM 元 素 )， 该 参数 可 以 是 一 个 选择 器 字符 串 或 者 DOM 


O callback (可 选 , 函数 ), 回调 函数 , 该 回 


YE: 如 果 在 el 上 应 用 了 过 


4. $remove() 


$remove() 7 1; HH 2K- el 所 指 的 DOM 元 素 或 片段 从 DOM 4 


该 方法 接受 一 个 参数 ， 


渡 效 果 ， 则 回调 会 在 过 渡 完 


调 函 数 会 在 el 元 素 被 插入 到 目标 元 素 后 被 触发 。 


O callback 〈 可 选 ， 函 数 )， 回 调 函 数 ， 该 


回调 函数 会 在 el 


ik: WAR el 上 应 用 了 过 渡 效 果 ， 则 回调 会 在 过 渡 完 


后 被 触发 。 


PBR. 


元 素 在 DOM 中 被 删除 后 触发 。 


后 被 触发 。 
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5. $nextTick() 
$nextTick() 方 法 用 来 在 下 次 DOM 更 新 循环 后 执行 指定 的 回调 函数 ， 使 用 该 方法 可 以 保证 
DOM 中 的 内 容 已 经 与 最 新 数据 保持 同步 。 


该 方法 接受 一 个 参数 : 


O callback〈 可 选 ， 函 数 )， 回 调 函 数 ， 该 回调 函数 会 在 下 次 DOM 更 新 循环 后 被 执行 。 它 
和 全 局 的 Vue.nextTick 方法 一 样 ， 不 同 的 是 ，callback 中 的 this 会 自动 绑 定 到 调用 它 的 


Vue 实例 上 。 
10.2.2 ”实例 Event 方法 的 使 用 触发 监听 删除 
We KCN ee $di tch $ $off 
在 详细 讲解 每 个 方法 的 使 用 之 前 , 我 们 先 看 一 Xv Ue x 
下 Vue 实例 事件 总 览 图 ， 如 图 10-3 所 示 。 diras 
$emit 


1. $on() 
$on() 方 法 用 来 监听 实例 上 的 自 定义 事件 。 


图 10-3 ”Vue 实 例 事件 总 览 


该 方法 接受 两 个 参数 : 


〇 ”event〔 字 符 串 )， 该 参数 可 以 是 一 个 事件 名 称 。 


O callback《〈 函 数 )， 回 调 函 数 ， 该 回调 函数 会 在 执行 $emit、$broadcast 或 者 $dispatch 后 
触发 。 


2. $once() 
$once0 方 法 也 是 用 来 监听 实例 上 的 自 定义 事件 ， 但 只 触发 一 次 。 


该 方法 接受 两 个 参数 ， 


O event〈 字 符 串 )， 该 参数 可 以 是 一 个 事件 名 称 。 


Q callback《〈 函 数 )， 回 调 函 数 ， 该 回调 函数 会 在 执行 Semit、$broadcast 或 者 $dispatch 后 触 
发 。 

3. $emit() 

$emit() 方 法 用 来 触发 事件 。 
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该 方法 接受 两 个 参数 ， 


O event (字符 串 )， 该 参数 可 以 是 一 个 事件 名 称 。 


Q args《〈 可 选 )， 传 递 给 监听 函数 的 参数 。 
4. $dispatch() 


$dispatchO 方 法 用 来 派发 事件 ， 即 先 在 当前 实例 触发 ， 再 沿 着 父 链 一 层 一 层 向 上 ， 如 果 对 应 
的 监听 函数 返回 false 就 停止 。 


该 方法 接受 两 个 参数 : 


O event〈 字 符 串 )， 该 参数 可 以 是 一 个 事件 名 称 。 


O args《〈 可 选 )， 传 递 给 监听 函数 的 参数 。 
5. $broadcast() 


$broadcase() 方 法 用 来 广播 事件 , BIER Dy 2 ti SE A Schildren , 如 果 对 应 的 监听 函数 返回 false 
就 停止。 


该 方法 接受 两 个 参数 : 


O event《〈 字 符 串 )， 该 参数 可 以 是 一 个 事件 名 称 。 


O args (可 选 )， 传 递 给 监听 器 的 参数 。 
6. $off() 
$off0) 方 法 用 来 删除 事件 监听 器 。 


该 方法 接受 两 个 参数 : 


O event《〈 字 符 串 )， 该 参数 可 以 是 一 个 事件 名 称 。 


O callback 〈 可 选 ， 函 数 )， 对 应 的 回调 函数 。 


SET 


如 果 没 有 参数 ， 即 删除 所 有 的 事件 监听 器 ， 如 果 只 提供 一 个 参数 一 事件 名 称 ， 即 删除 它 
对 应 的 所 有 监听 器 ; 如 果 提 供 两 个 参数 一 事件 名 称 和 回调 函数 ， 即 删除 对 应 的 这 个 回调 函数 。 


x LL x 
组 件 


组 件 是 Vue.js 最 推崇 的 ， 也 是 最 强大 的 功能 之 一 ， 核 心目 标 是 为 了 可 重用 性 高 ， 减 少 重复 
性 的 开发 。 我 们 可 以 把 组 件 代 码 按照 template, style. script 的 拆 分 方式 ， 放 置 到 对 应 的 .vue X 


pn 


Vue.js 的 组 件 可 以 理解 为 预先 定义 好 行为 的 ViewModel 类 。 一 个 组 件 可 以 预定 义 很 多 选项 ， 
但 最 核心 的 是 以 下 几 个 ; 


O 模板 (template) 一 一 模板 声明 了 数据 和 最 终 展 现 给 用 户 的 DOM 之 间 的 映射 关系 。 


O 初始 数据 (data?) 一 一 一 个 组 件 的 初始 数据 状态 。 对 于 可 复 用 的 组 件 来 说 , 通常 是 私有 


O 接受 的 外 部 参数 (props) — 组 件 之 间 通 过 参数 来 进行 数据 的 传递 和 共享 。 参 数 默认 
是 单 向 绑 定 〈 由 上 至 下 )， 但 也 可 以 显 式 声明 为 双向 绑 定 。 


O 方法 Cmethods) 一 一 对 数据 的 改动 操作 一 般 都 在 组 件 的 方法 内 进行 。 可 以 通过 v-on 
指令 将 用 户 输入 事件 和 组 件 方法 进行 绑 定 。 


O 生命 周期 钩子 函数 〈lifecycle hooks) 一 一 一 个 组 件 会 触发 多 个 生命 周期 钩子 函数 ， 
比如 created. attached. destroyed 等 。 在 这 些 钩子 函数 中 ， 我 们 可 以 封装 一 些 自 定 
义 的 逻辑 。 和 传统 的 MVC 相 比 ， 这 可 以 理解 为 Controller 的 逻辑 被 分 散 到 了 这 些 钧 
子 函数 中 。 
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11.1 基础 


11.1.1 注册 


1. 全 局 注册 
Vue.component('didi-component', DIDIComponent) 

如 上 所 示 ， 第 一 个 参数 是 注册 组 件 的 名 称 《〈 即 在 HTML. 中 我 们 可 以 这 样 使 用 组 件 : 
<didi-component></didi-component>); 第 二 个 参数 是 组 件 的 构造 函数 ， 它 可 以 是 Function, tha 
以 是 Object。 


O Function 一 一 DIDIComponent 可 以 是 用 Vue.extend0 创 建 的 一 个 组 件 构造 器 。 代 码 示例 如 下 : 
var MyComponent = Vue.extend ({ 
// 选项 . . . 
} 
O Object —— DIDIComponent 传 入 选项 对 象 ，Vue.js 在 背后 自动 调用 Vue.extend(). 4&5 
示例 如 下 : 
/7 AERA IRSE 


Vue.component('didi-component', { 


template: '<div>A custom component!</div>' 


} 


组 件 在 注册 之 后 ， 便 可 以 在 父 实例 的 模块 中 以 自 定 义 元 素 <didi-component> 的 形式 使 用 。 要 
确保 在 初始 化 根 实例 之 前 注册 了 组 件 ， 代 码 示例 如 下 : 


<body> 


<div id="example"> 
<didi-component></didi-component> 
</div> 
</body> 
<script> 
var DIDIComponent = Vue.extend ({ 
template: '<div>A custom component!</div>' 
} 
// 注册 
Vue.component ('didi-component', DIDIComponent) 


// 创建 根 实例 
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new Vue(í 
div» 


el: '#example' 


} 
</script> 


效果 如 图 11-1 所 示 。 
图 11-1 全 局 注册 


ik: 组 件 的 模板 替换 了 自 定义 元 素 ， 自 定义 元 素 的 
作用 只 是 作为 一 个 挂 载 点 。 可 以 用 实例 选项 replace 决定 是 否 替换 自 定义 元 素 。 


2， 局 部 注册 
不 需要 每 个 组 件 都 全 局 注册 ， 可 以 让 组 件 只 能 用 在 其 他 组 件 内 。 我 们 可 以 用 实例 选项 


主 册 ， 代 码 示例 如 下 : 


components 7 


«body» 
<div id="example"> 
<didi-component></didi-component> 


</div> 
</body> 
<script> 


var Child = Vue.extend ({ 


template: '<div>i am child!</div>', 


replace: true 


} 
var Parent = Vue.extend ({ 
template: '<p>i am parent</p><br/><child></child>', 
components: { 
// «didi-component»H fË 


在 父 组 件 模板 内 


'child': Child 


} 
} 
// 创建 根 实例 


new Vue ({ 


el: '#example', 


components: { 


'didi-component': Parent 
i am parent 


} 
} 
</script> 
图 11-2 ”局 部 注册 


效果 如 图 11-2 所 示 。 


i am child! 
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为 了 让 事件 更 简单 ， 我 们 可 以 直接 传 入 选项 对 象 而 不 是 构造 器 给 Vue.component() 和 
components 选项 。 代 码 示例 如 下 : 
// 在 一 个 步骤 中 扩展 与 注册 


Vue.component('didi-component', { 


template: '<div>A custom component!</div>' 
} 


// 局 部 注册 也 可 以 这 么 做 


var Parent = Vue.extend ({ 


components: { 
'didi-component': { 
template: '<div>A custom component!</div>' 
} 
} 
} 


11.1.2 ”数据 传递 


总 结 下 来 ，Vue.js 组 件 之 间 有 三 种 数据 传递 方式 : 


O props 
O 组 件 通信 
O slot 


下 面 我 们 分 别 对 每 一 种 数据 传递 方式 做 详细 的 阐述 。 


1. props 


“props” 是 组 件数 据 的 一 个 字段 ， 期 望 从 父 组 件 传 下 来 数据 。 因 为 组 件 实例 的 作用 域 是 孤 
立 的 ， 这 意味 着 不 能 并 且 不 应 该 在 子 组 件 的 模板 内 直接 引用 父 组 件 的 数据 ， 所 以 子 组 件 需要 显 
式 地 用 props 选项 来 获取 父 组 件 的 数据 。props 选项 可 以 是 字面 量 ， 也 可 以 是 表达 式 ， 还 可 以 绑 
定 修饰 符 。 下 面 我 们 详细 看 一 下 它 是 如 何 使 用 的 。 


(1) 字面 量 语法 


Vue.component('child', { 
// 声明 prop 
props: ['msg'], 


o 
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// prop 可 以 用 在 模板 内 


// 可 以 用 ^this.msg 设置 


template: '<span>{{ msg }},DDFE!</span>' hello, DDFE! 
} 
向 它 传 入 一 个 普通 字符 串 ， 效 果 如 图 11-3 所 示 。 图 11-3 字面 县 


«child msg="hello"></child> 


HTML 特性 不 区 分 大 小 写 。 名 字形 式 为 camelCase 的 props 用 作 特 性 时 ， 需 要 转换 为 


kebab-case 形式 ( 短 横 线 隔 开 )。 代 码 示例 如 下 : 


Vue.extend ({ 


// 声明 props 


props: ['myComponent'], 


template: '«div» {{myComponent}} DDFE! </div>', 


replace: true 
} 


<!-- kebab-case in HTML --> 
«child my-message="hello!"></child> 


(2) 动态 语法 


类 似 于 用 v-bind 将 HTML 特性 绑 定 到 一 个 表达 式 , 我 们 也 可 以 用 v-bind 将 动态 props 绑 定 
到 父 组 件 的 数据 。 每 当 父 组 件 的 数据 变化 时 ， 该 变化 也 会 传导 给 子 组 件 (类 似 于 AngularJS 绑 
定 策略 中 的 @)。 代 码 示例 如 下 : 


var Child = Vue.extend ({ 


// 声明 props 


props: ['didiProps'], 


template: '<div> {{didiProps }} DDFE! </div>', 


replace: true 


} 


var Parent = Vue.extend ({ 


template: '<p>i am parent</p><br/><child :didi-props="hello"></child>', 


data:function () 


{ 


return { 'hello': 


), 
components: { 
// «child» 只 能 


'child': Child 


在 父 


'hello,'] 


组 件 模板 内 


第 11 章 组 件 113 


// 创建 根 实例 

new Vue ({ 
el: '#example', 
components: { 


'didi-props': Parent 


(3) 绑 定 修饰 符 


props 默认 是 单 向 绑 定 一 - 当 父 组 件 的 属性 变化 时 ， 将 传导 给 予 组 件 ， 但 是 反 过 来 不 会 。 这 
是 为 了 防止 子 组 件 无 意 修改 父 组 件 的 状态 一 这 会 让 应 用 的 数据 流 难以 理解 。 不 过 ， 也 可 以 使 
Ris eto 


O .sync， 双 向 绑 定 。 


O .once， 单 次 绑 定 。 


代码 示例 如 下 : 
«i-- 默认 为 单 向 绑 定 --> 
«child :msg="parentMsg"></child> 
«1-- 双向 绑 定 --> 
«child :msg.sync-"parentMsg"»«/child» 
<!-- 单 次 绑 定 --> 
«child :msg.once="parentMsg"></child> 
双向 绑 定 会 把 子 组 件 的 msg 属性 同步 回 父 组 件 的 parentMsg 属性 〈 类 似 于 AngularJs 绑 定 
策略 中 的 =);， 单 次 绑 定 在 建立 之 后 不 会 同步 之 后 的 变化 。 如 果 props 是 一 个 对 象 或 数组 ， 那 么 
它 是 按 引 用 传递 的 。 在 子 组 件 内 修改 它 会 影响 父 组 件 的 状态 ， 而 不 管 使 用 哪 种 绑 定 类 型 。 代 码 
示例 如 下 : 


<body id-"example"» 


«input type-"text" v-model-"info.name"/» 
«child v-bind:msg.once-"info"»«/child» 
</body> 
<script> 
// 创建 根 实例 


new Vue ({ 


el: '#example', 


data: function() { 
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return { 


info: ( 


name: ' 顺 风车 ' 


), 
components: { 
"ohild as { 
// 声明 props 


props: ['msg'], 


template: '<div>{{msg.name}} DDFamily! </div>' 


}) 
</script> 


效果 如 图 11-4 所 示 。 


(4) prop 验证 


组 件 可 以 为 props 指定 验证 要 求 。 当 组 件 给 其 他 人 使 用 时 ， 可 以 确保 其 他 人 正确 地 使 用 
牛 。 此 时 prop 的 值 是 一 个 对 象 ， 代 码 示例 如 下 : 


一 、 


Vue.component('example', { 


props: { 


// 基础 类 型 检测 〈`nul1 ”的 意思 是 任何 类 型 都 可 以 ) 


propA: 'null', 
// 多 种 类 型 (1.0.2194) 


propM: [String, Number], 


pn 


// 必需 且 是 字符 
propB: { 
type: String, 
required: true 
), 
// 数字 ， 有 默认 值 
propC: { 
type: Number, 
default: 100 
), 


// 对 象 /数组 的 默认 值 应当 
propD: { 


一 个 函数 返回 


顺风 车 、 专 车 
顺风 车 、 专 车 DDFamily! 


图 11-4 单 次 绑 定 
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type: Object, 


default: function () { 


return ( msg: 'hello' } 


} 
1g 


// 指定 这 个 prop 为 双向 绑 定 
// 如 果 绑 定 类 型 不 对 将 抛 出 一 条 和 警告 


prop 


E: { 


twoWay: true 


is 


// 
prop 


val 


定义 验证 函数 
Eri 


lidator: function (value) { 


return value > 10 


type 可 以 是 下 面 的 原生 构造 器 ; 


O O O O O Ọ 


type 也 可 以 是 一 个 自 定义 构造 器 ， 使 


String 
Number 
Boolean 
Object 
Function 


Array 


] instanceof 检测 。 


当 props 验证 失败 时 ，Vuejs 将 拒绝 在 子 组 件 上 设置 此 值 ， 如 果 使 用 的 是 开发 版 本 ， 将 会 抛 


出 一 条 警告 。 
(5) prop 转换 函数 


现在 我 们 可 以 给 prop 定义 一 个 coerce 函数 (Vue.js 1.0.12 新 增 ) 一 一 每 当 prop 在 父 类 更 新 
的 时 候 ，prop 的 值 将 会 通过 coerce 函数 ， 可 以 将 它 理解 为 prop 的 单 向 过 滤器 ， 只 是 它 被 定义 在 
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了 子 类 组 件 内 。 
Vue.component('example', 
{ 

// 转换 函数 (1.0.12 新 增 ) 
// 在 设置 值 之 前 转换 值 

{ 


coerce: 


{ 


props: 


propG: 

function (val) { 

return val + '' // 将 值 转换 为 
} 

}, 

propH: { 


coerce: function (val) { 
return JSON.parse (val) 


} 


(6) props & propsData & data 


以 上 属性 均 与 数据 有 关 ，props 


// 将 


字符 


EP: 


JSON NH 


转换 为 对 象 


我 们 在 开发 组 件 或 实例 
性 则 常用 来 在 组 件 初 始 


2， 组 件 通信 


类 似 于 AngularJS, Vuejs 也 实现 了 组 件 之 间 的 相互 通信 。 尽 管子 组 从 
Fou, ASE 
F 的 数据 ， 尽 量 显 式 地 使 用 


访问 它 的 父 组 件 ， 父 组 件 有 
用 this.$root 访问 根 实例 ， 不 


个 数组 


化 Vue 对 象 时 经 常 使 用 ， 它 作为 组 人 
化 后 覆盖 props 中 的 属性 。 


过 子 组 件 应 当 避 免 直 接 依赖 父 组 伯 


FIERA 


F 面 已 经 介绍 ， 它 作用 于 父子 组 件 之 间 的 数据 传递 ; 而 data 
有 数据 存在 ; propsData 这 个 属 


ry 


this.$children, GE ATA 


F 可 以 用 


this.$parent 
1 的 后 代 可 以 


传递 数据 。 另 外 ， 在 子 组 件 中 修改 父 组 件 的 状态 是 非常 糟 料 的 做 法 ， 因 为 : 
O 父 组 件 与 子 组 件 紧密 地 耦合 。 
O 只 看 父 组 件 ， 很 难 理解 父 组 件 的 状态 ， 因 为 它 可 能 被 任意 子 组 人 
只 有 组 件 自己 能 修改 其 状态 。 
对 为 作用 域 是 有 层次 的 ， 所 以 我 们 可 以 在 作用 域 链 上 传递 事件 。 通 常 来 说 ， 


方式 ， 一 个 好 的 经 验 规 则 就 是 ， 全 看 要 触发 事 伯 


F 的 作用 域 。 如 果 要 通知 整个 事 伯 


props 


F 修 改 ! 在 理想 情况 下 ， 


选择 事件 传递 


系统， 就 要 向 
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FJ d. fj Vue 实例 都 是 一 个 事件 触发 器 : 
O $on) 一 一 监听 事件 。 
O Semit() 一 一 把 事件 沿 着 作用 域 链 向 上 派送 。 
O $dispatch() 一 一 派发 事件 ， 事 件 沿 着 父 链 冒 泡 。 
〇 ”S$broadcast() 一 一 广播 事件 ， 事 件 向 下 传导 给 所 有 的 后 代 。 
在 解决 组 件 之 间 通 信 问 题 前 ， 我 们 先 来 看 一 下 Vue 的 自 定义 事件 接口 ， 用 于 在 组 件 树 中 通 


言 。 这 个 事件 系统 独立 于 原生 DOM 事件 ， 用 法 也 不 同 ， 代 码 示例 如 下 : 


<body> 


iip 


<!-- 子 组 件 模板 --> 
<template id="child-template"> 


<input v-model="msg"> 


<button v-on:click="notify">Dispatch Event</button> 


</template> 


< 由 = 二 


«div 


父 组 件 模板 --> 


id="events-example"> 


<p>Messages: {{ messages | json }}</p> 


<child></child> 


</div> 


</body> 


<script> 


// 注册 


子 组 件 


// 将 当前 消息 派发 出 去 


Vue.component('child', { 


template: '#child-template', 


data: function () { 


return ( msg: 'hello' } 


Lj 


methods: { 


notify: function () { 


if (this.msg.trim()) { 
this.$dispatch('child-msg', this.msg) 


this.msg = '' 
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// 初始 化 父 组 件 
// 收 到 消息 时 将 事件 推 入 一 个 数组 中 


var parent = new Vue({ 


el: 'fevents-example', 
data: { 
messages: [] 
), 
// 在 创建 实例 时 “events” 选 项 简单 地 调用 `$on、 


events: { 


'child-msg': function (msg) { 
// 事件 回调 内 的 this ”自动 绑 定 到 注册 它 的 实例 上 


this.messages.push (msg) 


} 
} 
</script> | Dispatch Event | 


效果 如 图 11-5 所 示 。 图 11-5 通信 


Messages: [ “hello”, "dispatch" ] 


上 面 展示 了 父子 组 件 的 通信 , 只 是 从 父 组 件 的 代码 中 不 能 直观 地 看 到 child-msg 事件 来 自 哪 
里 。 如 果 在 模板 中 子 组 件 用 到 的 地 方 声 明 事 件 处 理 器 则 会 更 好 。 为 此 ， 子 组 件 可 以 用 v-on 监听 
自 定 义 事 件 。 代 码 示例 如 下 : 

«body» 


<!-- 子 组 件 模板 --> 
<template id="child-template"> 


4 


Jn 
bum 


| 下 


<input v-model="msg"> 
<button v-on:click="notify">Dispatch Event</button> 
</template> 
<!-- 父 组 件 模板 --> 
<div id="events-example"> 
<p>Messages: {{ messages | json }}</p> 
«child v-on:child-msg-"handleIt"»«/child» 
</div> 
</body> 
<script> 
// 注册 子 组 
// 将 当前 消息 派发 出 去 


Vue.component('child', { 


template: '#child-template', 
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data: function () { 
return { msg: 'hello' } 
), 
methods: í( 
notify: function () { 
if (this.msg.trim()) { 
this.$dispatch('child-msg', this.msg) 


this.msg = 


} 
} 


// 初始 化 父 组 件 
// 在 收 到 消息 时 将 事件 推 入 一 个 数组 


var parent = new Vue({ 


au 


el: '#events-example', 
data: { 
messages: [] 
), 
methods: { 
'handleIt': function () { 
alert ("a") 
} 


} £ 
// 在 创建 实例 时 events 选项 简单 地 调用 $on 


events: { 


'child-msg': function (msg) { 


// 事件 回调 内 的 ”this 自动 绑 定 到 注册 它 的 实例 上 


this.messages.push (msg) 


} 
} 
</script> 


这 样 就 很 清楚 了 一 一 当 子 组 件 触发 了 child-msg 事件 时 ， 
所 有 影响 父 组 件 状 态 的 代码 都 放 到 父 组 件 的 handlelt 方法 


L 


有 时 仍然 需要 在 JavaScript 4 


尽管 有 props 和 events， 但 是 


父 组 件 的 handlelt 方法 ; 
; 子 组 件 只 关注 触发 事 伯 


HRV MSA. Al 


oe Hl FH e 


o 


is 


比 ， 可 以 使 
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用 v-ref 为 子 组 件 指定 一 个 索引 IJD 。 代 码 示例 如 下 : 


«comp v-ref:child»«/comp» 
«comp v-ref:some-child></comp> 
// 从 父 组 件 访问 

this.$refs.child 
this.$refs.someChild 


3. slot 分 发 内 容 
在 使 用 组 件 时 ， 常 常 要 像 这 样 组 合 它们 : 


«didi» 


<didi-header></didi-header> 
<didi-footer></didi-footer> 


</didi> 


yy a 
注意 两 点 : 


O <didi> 组 件 不 知道 它 的 挂 载 点 会 有 什么 内 容 , 挂 载 点 的 内 容 是 由 <didi> 的 父 组 件 决 定 的 。 


O <didi> 组 件 很 可 能 有 它 自 己 的 模板 。 


T 


为 了 让 组 件 可 以 组 合 ， 我 们 需要 一 种 方式 来 混合 父 组 件 的 内 容 与 子 组 件 自己 的 模板 。 这 个 
处 理 称 为 内 容 分 发 (或 “transclusion”， WRAZ AngularJs 的 话 )。Vuejs 实现 了 一 个 内 容 分 发 
API， 参 照 了 当前 Web 组 件 规范 草稿 ， 使 用 特殊 的 <slot> 元 素 作为 原始 内 容 的 插 槽 。 


vd 


C1) 编译 作用 域 
在 深入 内 容 分 发 API 之 前 ， 我 们 先 明确 内 容 的 编译 作用 域 。 假 定 模板 为 : 


«child v-on:child-msg-"handleIt"»((msg))«/child» 
msg 应 该 绑 定 到 父 组 件 的 数据 ， 还 是 绑 定 到 子 组 件 的 数据 ? 答案 是 父 组 件 。 简 单 地 说 ， 
组 件 作 用 域 是 : 父 组 件 模板 的 内 容 在 父 组 件 作用 域内 编译 ， 子 组 件 模 板 的 内 容 在 子 组 件 作 用 
一 个 常见 的 错误 是 试图 在 父 组 件 模 板 内 将 一 个 指令 绑 定 到 子 组 件 的 属性 /方法 : 
<!-- 无 效 --> 


<child-component v-show="someChildProperty"></child-component> 
假定 someChildProperty 是 子 组 件 的 属性 ， 上 例 不 会 如 预期 的 那样 工作 。 父 组 件 模板 不 应 该 
知道 子 组 件 的 状态 。 


T 
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如 果 要 将 子 组 件 内 的 指令 绑 定 到 一 个 组 件 的 根 节点 ， 则 应 当 在 它 的 模板 内 这 样 做 : 
Vue.component('child-component', { 
// 有 效 ， 因 为 是 在 正确 的 作用 域内 
template: '«div v-show="someChildProperty">Child</div>', 


data: function () ( 
return { 


someChildProperty: true 


类 似 的 ， 分 发 内 容 是 在 父 组 件 作 用 域内 编译 的 。 


(2) 单个 slot 


父 组 件 的 内 容 将 被 抛弃 , 除非 子 组 件 模板 包含 <slot>。 如 果子 组 件 模 板 只 有 一 个 没有 特性 的 
slot， 父 组 件 的 整个 内 容 将 插 到 slot 所 在 的 地 方 并 蔡 换 它 。 


n 


<slof> 标 签 的 内 容 视 为 回 退 内 容 。 回 退 内 容 在 子 组 件 的 作用 域内 编译 ， 当 宿主 元 素 为 空 并 
没有 内 容 供 插入 时 显示 这 个 回 退 内 容 。 


假定 didi-component 组 件 有 下 面 模板 : 


«div» 


«hl»This is my component!«/hl» 


«slot» 

如 果 没 有 分 发 内 容 则 显示 我 。 
«/slot» 
</div> 


父 组 件 模板 ; 


«didi-component» 
<p>This is some original content</p> 
<p>This is some more original content</p> 


</didi-component> 
泻 染 结果 为 : 


<div> 


«hl»This is my component!«/hl» 
<p>This is some original content</p> 
<p>This is some more original content</p> 


«/div» 
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(3) 具名 slot 


«slot» 元 素 可 以 用 
名 slot 将 匹配 内 容 片 段 


x 


对 应 slot 特性 的 元 素 。 


仍然 可 以 有 一 个 匿名 slot， 作 为 找 不 到 匹配 的 内 容 片 段 的 回 退 捐 


有 默认 slot， 这 些 找 不 到 匹配 的 内 容 片 段 将 被 抛弃 。 


例如 ， 假 定 有 一 个 multi-insertion 组 件 ， 代 人 码 示例 如 下 : 


<div> 
<slot name="one"></slot> 
<slot></slot> 
<slot name="two"></slot> 


</div> 
父 组 件 模板 : 


«multi-insertion» 


<p slot="one">One</p> 

<p slot="two">Two</p> 

<p>Default A</p> 
</multi-insertion> 


TERA AN: 


<div> 


<p slot="one">One</p> 
<p>Default A</p> 
<p slot="two">Two</p> 


</div> 


在 组 合 组 件 时 ， 内 容 分 发 API 是 非常 有 用 的 机 制 。 


(4) 原理 解析 


slot 是 一 个 内 置 的 自 定 义 元 素 指令 ， 源 码 定 义 如 下 : 


priority: SLOT, 


params: ['name'], 
bind () { 
var name = this.params.name || 'default' 


i 


个 特殊 特性 name 配置 如 何 分 发 内 容 。 多 个 slot 可 以 有 不 同 的 名 字 。 具 


aiii 


H? 


它 是 默认 slot。 如 果 没 


/*this.vm. slotContents 为 父 模板 中 子 组 件 的 模板 内 容 按照 slot 的 值 组 成 的 键 值 对 《其 中 没有 slot 
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属性 的 将 被 放 入 'qefault' 值 中 ) */ 


var content = this.vm. slotContents && this.vm. slotContents [name] 


if (!content || !content.hasChildNodes()) { 
this.fallback() 
} else { 
this.compile(content.cloneNode(true), this.vm. context, this.vm) 
} 
), 
compile (content, context, host) { 
if (content && context) { 
ato 
this.el.hasChildNodes() && 
content.childNodes.length --- 1 && 
content.childNodes[0].nodeType --- 1 && 
content.childNodes[0].hasAttribute('v-if') 
) ( 


/* 如 果 父 模板 有 类 似 数据 <p slot-"one" v-if="show"》 子 模板 《slot name="one">hello</slot> 


content 内 容 追 加 template 标签 带 v-else 属性 文本 为 hello*/ 


const elseBlock = document.createElement('template') 
elseBlock.setAttribute('v-else', '') 
elseBlock.innerHTML - this.el.innerHTML 
elseBlock. context - this.vm 
content.appendChild(elseBlock) 

} 

const scope = host 
? host. scope 
: this. scope 

this.unlink = context.$compile( 


content, host, scope, this. frag 


} 
if (content) { 
replace(this.el, content) 
} else { 
remove (this.el) 
} 
), 
fallback () ( 


this.compile(extractContent(this.el, true), this.vm) 
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), 
unbind () { 
if (this.unlink) { 
this.unlink() 


slot 在 bind 回调 函数 中 ， 根 据 name ¥ 


需 替 换 的 内 容 ， 则 调用 父 元 素 的 replaceChild 方法 ， 
将 要 蔡 换 的 元 素 。 如 果 替 换 插 模 元 素 中 有 


素 ， 且 该 节点 有 v- 计 指令 ， 且 slot 元 素 中 有 


内 容 ， 如 果 v-if FON false, WY else 模板 内 容 。 


11.1.3 混合 


混合 以 一 种 灵活 的 方式 为 组 件 提供 分 布 复 


组 件 使 用 了 混合 对 象 时 ， 混 合 对 象 的 所 有 


var myMixin = { 
created: function () { 
this.hello() 
), 
methods: { 
hello: function () { 


console.log('hello from mixin!') 


} 
// 定义 一 个 组 件 ， 使 用 这 个 混合 对 象 


var component = Vue.extend({ 


mixins: [myMixin], 
template:"<hl>hello~ DIDI</h1>" 

} 

// 创建 根 实例 


new Vue ({ 


el: '#example', 


components: { 


选项 


取 将 要 蔡 换 插 槽 的 元 素 ， 如 果 在 上 下 文 环 境 中 有 所 
替换 元 素 将 slot 元 素 蔡 换 ;否则 直接 删除 
个 顶级 元 素 ， 且 顶级 元 素 的 第 一 子 节 点 为 DOM 元 
内 容 ， 则 替换 模板 将 增加 v-else 模板 放 入 插 档 中 的 


j 功 能。 混合 对 象 可 以 包含 任意 的 组 件 选项 。 当 
各 被 “混入 ”组 件 自 


己 的 选项 中 。 代 码 示 例如 下 : 
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'my-component': component 


效果 如 图 11-6 所 示 。 


当 混 合 对 象 与 组 件 包含 同名 选项 时 ， 这 些 选 项 将 以 适当 的 策略 合 
并 。 例如， 同名 钧 子 函数 被 并 入 一 个 数组 中 ， 因 而 都 会 被 调用 。 男 外 ， 
混合 的 钧 子 将 在 组 件 自己 的 钧 子 之 前 调用 ， 代 码 示 例如 下 : 


var myMixin = { 


created: function () { 
this.hello() 

), 

methods: { 
hello: function () { 


console.log('hello from mixin!') 


} 
// 定义 一 个 组 件 ， 使 用 这 个 混合 对 象 


var component = Vue.extend({ 


mixins: [myMixin], 
template:"«hl»hello- DIDI«/hl»", 
created: function () { 
console.log('component hook called') 
} 
} 
// 创建 根 实例 


new Vue ({ 


el: '#example', 
components: { 


'my-component': component 


值 为 对 象 的 选项 ， 如 methods, components 和 directives 将 合并 到 同 
突 ， 则 组 件 的 选项 优先 。 代 码 示 例如 下 : 


var myMixin = { 


methods: { 


hello^ DIDI 


Q [] bLt&ements| Network 


| 了 <html lang—"zh-CN"> 
> head» 


图 11-6 ”混合 


一 个 对 象 肉 。 如 果 键 ; 
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foo: function () { 
console.log('foo') 

), 

conflicting: function () { 


console.log('from mixin') 


} 
// 定义 一 个 组 件 ， 使 用 这 个 混合 对 象 


var myMixin = { 
methods: { 
foo: function () { 
console.log('foo') 
), 
conflicting: function () { 


console.log('from mixin') 


} 
// 定义 一 个 组 件 ， 使 用 这 个 混合 对 象 


var component = Vue.extend({ 


mixins: [myMixin], 
template:'«hl»hello- DIDI«/hl»', 
methods: { 
bar: function () { 
console.log('bar') 
), 
conflicting: function () { 


console.log('from self') 


} 
} 
var vm = new component (); 
vm.foo() // -> "foo" 
vm.bar() // -» "bar" 


vm.conflicting() // -» "from self" 


ik: Vue.extend() 使 用 同样 的 合并 策略 。 


局 注册 混合 ， 它 就 会 影响 所 有 之 后 创建 的 


T 


混合 也 可 以 全 局 注册 ， 但 需要 小 心 使 用 ! 一 旦 全 
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DES. (os T: 


Vue 实例 。 如 果 使 用 恰当 ， 则 可 以 为 自 定义 选项 注入 处 


Vue.mixin ({ 
created: function () { 
var myOption = this.Soptions.myOption 
if (myOption) { 


console.log (myOption) 


} 
} 
// 定义 一 个 组 件 ， 使 用 这 个 混合 对 象 
var component = Vue.extend({ 


template:"<hl>hello~ DIDI</h1>" 
} 


new Vue ({ 


el:'#example', 
components: { 
'my-component': component 
), 
myOption:'hello' 
} 


慎 用 全 局 混合 ， 因 为 它 会 影响 到 每 个 所 创建 的 Vue 实例 ， 包 括 第 三 方 组 件 。 在 大 多 数 情况 
下 ， 它 应 当 只 用 于 自 定义 选项 ， 就 像 上 面 示例 一 样 。 


11.1.4 动态 组 件 


多 个 组 件 可 以 使 用 同一 个 挂 载 点 ， 然 后 动态 地 在 它们 之 间 切 换 。 使 用 保留 的 <component> 
元 素 ， 动 态 地 绑 定 到 它 的 is 特性 。 代 码 示例 如 下 : 


<body id="example"> 


<input type="radio" id-"one" value-"fast" v-model="currentView"> 
«label for="one">fast</label> 

«br» 

<input type="radio" id="two" value="bus" v-model="currentView"> 
<label for="two">bus</label> 

<br> 


<input type="radio" id="two" value="business" v-model-"currentView"» 
<label for="two">business</label> 


<template id="bus"> 


128 ”Vue.js 权威 指南 


<div> 滴 滴 巴 士 </div> 
</template> 
<template id="business"> 
<div> 滴 滴 专 车 </div> 
</template> 
<template id="fast"> 
<qiv> 滴 滴 快 车 </div> 


«/template» 
«component :is-"currentView"» 
«1-- HFE vm.currentview 变化 时 改变 --» 
«/component» 
</body> 


<script> 

var bus = Vue.extend({ 
template: '#bus', 
replace: true 

)); 

var business = Vue.extend({ 
template: '#business', 
replace: true 

} 

var fast = Vue.extend({ 
template: '#fast', 
replace: true 

} 

// 创建 根 实例 


new Vue ({ 


el: '#example', 
data: { 
currentView: 'fast' 
), 
components: { 
fast: fast, 
bus: bus, 
business: business 


} 


}) ® fast 
bus 
business 


通过 is 属性 绑 定 的 vm.currentView 变量 值 ， 控 制 展示 的 组 件 ， 效 果 ”| 滴 滴 快 车 


«/script» 


Amm. 


如 图 11-7 所 示 。 图 11-7 BASH 


T 
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1. keep-alive 


如 果 把 切换 出 去 的 组 件 保 留 在 内 存 中 ， 则 可 以 保留 它 的 状态 或 避免 重新 泻 染 。 为 此 ， 可 以 
添加 一 个 keep-alive 指令 参数 。 代 码 示 例如 下 ; 


<Component :is-"currentView" keep-alive» 
«i-- 非 活动 组 件 将 被 缓存 --> 
</component> 


源码 定义 如 下 : 


<!-- 源 码 目录 : src/util/env.js 7 行 --> 


bind: function () { 
ix // 省 略 


// keep-alive cache 


this.keepAlive = this.params.keepAlive 
if (this.keepAlive) { 
this.cache = {} 
} 
// 省 略 
), 


build: function (extraOptions) { 
var cached = this.getCached() 
if (cached) { 


return cached 


Vue.js 为 其 组 件 设计 了 一 个 [keep-alive] 的 特性 ,如 果 这 个 特性 存在 , 那么 在 组 件 被 重复 创建 
时 ， 会 通过 缓存 机 制 快速 创建 组 件 ， 以 提升 视图 更 新 的 性 能 。 


2. activate 钩子 


在 切换 组 件 时 ， 切 入 组 件 在 切入 前 可 能 需要 进行 一 些 异 步 操作 。 为 了 控制 组 件 切换 时 长 ， 
给 切入 组 件 添加 activate 钩子 函数 。 代 码 示 例如 下 : 


Vue.component('activate-example', { 
activate: function (done) { 
var self - this 


loadDataAsync(function (data) { 
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self.someData - data 
done () 


} 


i£: activate 钩子 只 作用 于 动态 组 件 切 换 或 静态 组 件 初 始 化 泻 染 的 过 程 中 , 不 作用 于 使 用 实 
例 方 法 手工 插入 的 过 程 中 。 


3. transition-mode 


transition-mode 特性 用 于 指定 两 个 动态 组 件 之 间 如 何 过 渡 。 


M 


在 默认 情况 下 ， 进 入 与 离开 平滑 地 过 渡 。 这 个 特性 可 以 指定 另外 两 种 模式 : 


O in-out 一 一 新 组 件 先 过 渡 进 入 ， 等 它 的 过 渡 完 成 之 后 当前 组 件 过 渡 出 去 。 


O outin 一 一 当前 组 件 先 过 渡 出 去 ， 等 它 的 过 渡 完 成 之 后 新 组 件 过 渡 进 入 。 
<!-- 先 淡出 再 淡 入 --> 


<component 


:is="view" 
transition="fade" 
transition-mode-"out-in"» 


</component> 


.f£ade-transition { 
transition: opacity .3s ease; 
} 
.fade-enter, .fade-leave { 
opacity: 0; 
} 


11.2 ”相关 拓展 


11.2.1 组 件 和 v=-for 


自 定 义 组 件 可 以 像 普通 元 素 一 样 直 接 使 用 v-for， 代 码 示 例如 下 : 
<didi-component v-for-"item in items"></didi-component> 


为 组 件 的 作用 域 是 孤立 的 ， 上 面 的 代码 无 法 将 数据 传递 到 组 件 内 部 。 在 11.1.2 节 中 我 们 


>H 
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讲述 了 组 件 之 间 通 信和 的 三 种 方式 ， 这 里 将 使 用 props。 代 码 示 例如 下 : 
«didi-componentv-for-"item in items":item-"item" :index="$index"></didi-component> 


HS 显 式 声明 数据 来 自 哪 里 可 以 让 组 件 复 用 在 其 他 地 方 。 


11.2.2 ”编写 可 复 用 组 件 


在 编写 组 件 时 ， 时 刻 考 虑 组 件 是 否 可 复 
关系 ， 但 是 可 复 用 组 件 一 定 要 定义 一 个 清晰 的 


有 好 处 的 。 一 次 性 组 件 跟 其 他 组 件 紧密 耦合 没 
FRO. 


prop、 事 件 和 slot， 关 于 这 三 部 分 上 面 已 作 详 尽 说 明 。 
O prop 人 允许 外 部 环境 传递 数据 给 组 件 。 
O 事件 允许 组 件 触发 外 部 环境 的 actions 

O slot 允许 外 部 环境 将 内 容 插入 到 组 件 的 视图 结构 内 。 


D Qu 
MH 


Vue.js 组 件 API 来 自 三 部 分 


使 用 v-bind 和 v-on 的 简写 语法 ， 模 板 的 缩 进 清楚 且 简 洁 。 代 码 示例 如 下 : 


«my-component 


:fooe"baz" 

:bar="qux" 

@event-a="doThis" 

@event-b="doThat"> 

<!-- content --> 

<img slot="icon" src="..."> 

<p slot="main-text">Hello!</p> 
</my-component> 


11.2.3 ”异步 组 件 


在 大 型 应 用 中 ， 我 们 可 能 需要 将 应 用 拆 分 为 小 块 ， 每 小 块 实现 按 需 加 载 。 为 了 让 事情 更 简 
H, Vuejs 允许 将 组 件 定义 为 一 个 工厂 函数 ， 动 态 地 解析 组 件 的 定义 。Vuejs 只 在 组 件 需 要 演 染 
时 触发 工厂 函数 ， 并 且 把 结果 缓存 起 来 ， 方 便 后 面 的 再 次 渲染 。 代 码 示 例如 下 : 


Vue.component('async-example', function (resolve, reject) { 


setTimeout(function () { 
resolve(í 
template: '<div>I am async!</div>' 
} 
}, 1000) 
} 


132 ”Vue.js 权威 指南 


工厂 函数 接受 一 个 resolve 回调 ， 在 收 到 从 服务 器 下 载 的 组 件 定义 时 调用 。 也 可 以 调用 
reject(reasom) 指 示 加 载 失败 。 这 里 setTimeout 只 是 为 了 演示 。 怎 么 获取 组 件 完 全 由 我 们 决定 ， 推 
荐 配合 使 用 Webpack 的 代码 分 割 功能 。 代 码 示例 如 下 : 
Vue.component('async-webpack-example', function (resolve) { 
// Ce du 语法 告诉 webpack， 将 编译 后 的 代码 分 割 成 不 同 的 块 
// 这 些 块 将 通过 agax 请 求 自动 下 载 


require(['./my-async-component'], resolve) 


} 


11.2.4 资源 命名 约定 


一 些 资源 如 组 件 和 指令 ， 是 以 HTML 特性 或 HTML | 
因为 HTML 特性 的 名 字 和 标签 的 名 字 不 区 分 大 小 写 ， 所 以 资源 的 名 字 通 常 需 使 用 kebab-case 而 
不 是 camelCase 形式 ， 这 不 大 方便 。 


Vue.js 文 持 资源 的 名 字 使 用 camelCase 或 PascalCase 形式 ,并 且 在 模板 中 自动 将 它们 转换 为 
kebab-case 形式 〈 类 似 于 prop 的 命名 约定 )。 代 码 示 例如 下 : 
// 在 组 件 定义 中 


n 


components: { 
// 使 用 camelCase 形式 注册 
myComponent: { *... */ } 


} 
<!-- 在 模板 中 使 用 kebab-case 形式 --> 


«my-component»«/my-component» 
ES 6 对 象 字 面 量 缩写 也 没 问 题 


// PascalCase 


import TextBox from './components/text-box'; 


import DropdownMenu from './components/dropdown-menu'; 


export default { 
components: { 
// 在 模板 中 写作 《text-box> 和 《dropdown-menu>》 


TextBox, 


DropdownMenu 
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不 是 把 它 当 作 分 发 内 


11.2.5 ”内 联 模板 
如 果子 组 件 有 inline-template 特性 ,组 件 将 把 它 的 内 容 当 作 其 模板 ， 而 
E 级 比 template 高 。 这 让 模板 更 灵活 。 代 码 示 例如 | 


X H. inline-template (07 


7| 


T 


<didi-component inline-template> 
<p>These are compiled as the component's own template</p> 


<p>Not parent's transclusion content.</p> 


不 能 缓存 模板 编译 结果 。 最 佳 实践 是 使 


+ 
[ 


«/didi-component» 
但 是 inline-template 让 模板 的 作用 域 难以 理解 ，3 


用 template 选项 在 组 件 内 定义 模板 。 代 码 示 例如 下 : 


<body id="example"> 


<div id="items"> 
<b>inline-template:</b> 
«my-item v-for-"item in items" 
{{item.text}}</p> 


:item-"item" inline-template> 


<p>{{a}} , 
</my-item> 
<b>no-inline-template:</b> 
<my-item v-for="item in items" :item="item"> 


{{a}} , {f{items[0].text}} 


</my-item> 
</div> 
</body> 
<script> 


var items = [ 
{ number:1, text:'one' 


( number:2, text:'two' 


Ls 
} 


1; 
var vue 
el: 'fitems', 


function (){ 


= new Vue({ 


data: 
return { 
items: items , 
a:"i am in parent" 


} 


Ve 


components: { 


'my-item': { 
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props: ['item'], 


data: function() { 


return { 
a: 'i am in child' 
} 
), 
template:'«p»item 模板 : {{a}},{{item.text}}; slot: «slot»«/slot»«/p»' 
} inline-tem late: 
} i am in child, one 
n; i am in child, two 
«/script» 


no-inline-template : 


效果 如 图 11-8 所 示 。 


item 模板 ，i am in child, one; slot: i am in parent , one 


item #48: i am in child, two; slot: i am in parent , one 
图 11-8 内 联 模板 


在 使 用 template 选项 时 ， 模 板 的 内 容 将 替换 实例 的 挂 载 元 素 ， 因 而 推荐 模板 的 顶级 元 素 始 
终 是 单个 元 素 。 


11.2.6 片段 实例 


不 要 这 样 写 模板 : 


<div>root node 1</div> 


<div>root node 2</div> 
推荐 这 样 写 : 


«div» 


I have a single root node! 
<div>node 1</div> 
<div>node 2</div> 


</div> 


下 面 几 种 情况 会 让 实例 变 成 一 个 片段 实例 : 


O 模板 包含 多 


> 


顶级 元 素 。 


O 模板 只 包含 普通 文本 。 


O 模板 只 包含 其 他 组 件 〈 其 他 组 件 可 能 是 一 个 片段 实例 )。 


O 模板 只 包含 一 个 元 素 指令 ， 如 <partial> 或 vue-router 的 <router-view>。 


O 模板 根 节点 有 一 个 流程 控制 指令 ， 如 v- 直 或 v-for。 
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=> 


青 况 让 实例 有 未 知 数量 的 顶级 元 素 ， 它 将 和 


HT 


EX: DOM 内 容 当 作 片 段 。 片 段 实例 仍然 会 


正确 地 泻 染 内 容 。 不过, 它 没有 一 个 根 节 点 , 它 的 $el 指向 一 个 销 节 点 , 即 一 个 空 的 文本 节点 (在 


开发 模式 
但 是 更 重要 的 是 ， 组 件 元 素 上 的 非 流程 控 M 
根 元 素 供 绑 定 。 代 码 示例 如 下 : 


下 是 一 个 注释 节点 )。 


<!-- 不 可 以 ， 因 为 没有 根 元 素 --> 


<example v-show="ok" transition="fade"></example> 


<!-- props 可 
<example 


<!-- 流程 控制 可 


以 --> 
:prop="someData"></example> 


| 以 ， 但 是 不 能 有 过 渡 --> 


«example v-if-"ok"»«/example» 


当然 片段 实例 有 它 的 用 处 ， 不 过 通常 给 组 从 


令 和 特性 能 正确 地 转换 ， 同 时 性 能 也 稍微 好 些 。 


11.3 生命 周期 


化 后 将 经 历 创建 、 编 


SRM 


担保 Sel 已 插入 文档 。 


GES, JE prop 特性 和 过 渡 将 被 忽略 ， 


>H 


为 没有 


F 一 个 根 节点 比较 好 。 它 会 保证 组 件 元 素 上 的 指 


在 Vue.js 中 ,在 实例 化 Vue 之 前 ,它们 以 HTML 的 文本 形式 保存 在 文本 编辑 器 中 。 当 实例 
如 图 11-9 所 示 。 


生命 周期 钩子 : 


1. init 


在 实例 开始 初始 化 时 同步 


2. created 


译 和 销毁 三 个 主要 阶段 ， 


周 用 。 此 时 数据 观测 、 


事件 和 Watcher 都 尚未 初始 化 。 


在 实例 创建 之 后 同步 调用 。 此 时 实例 已 经 结束 解析 选项 ， 这 意味 着 已 建立 ; 数据 绑 定 、 计 


E 、 方 法 、Watcher 事 件 回 调 。 但 是 还 没 : 


3. beforeCompile 


4. compiled 


在 编译 开始 前 调用 。 


在 编译 结束 后 调用 。 此 时 所 有 的 指令 已 和 


E 效 ， 


有 开始 DOM již, $e 还 不 存在 。 


> 


而 数据 的 变化 将 触发 DOM 更 新 。 但 是 不 
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NO 


vm.$mount(el) 


YES 


Compile template 
and replace "el" 
with template 


Compile "el" 


in.place as 
template 


insertd into 
docment for 
the first time 


beforeDestroy 1 一 一 一 一 一 一 


Teardown 
| data bindings.child | 
components and 
event listeners 


图 11-9 生命 周期 


5. ready 


在 编译 结束 和 Sel 第 一 次 插入 文档 之 后 调用 ， 如 在 第 一 次 attached 钩子 之 后 调用 。 注 意 ， 
必须 是 由 Vue FEA CU vm.$appendTo() 等 方法 或 指令 更 新 ) 才 触 发 ready JT HJ. 
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6. attached 


vm.$el 插入 DOM 时 调用 。 必 须 是 由 指令 或 实例 方法 〈 如 $appendTo0) 插入 ， 直 接 操作 
vm.$el 不 会 触发 这 个 钧 子 。 


7. detached 


发 这 个 钩子 。 


在 vm.$el 从 DOM 中 删除 时 调用 。 必 须 是 由 指令 或 实例 方法 删除 ， 直 接 操作 vm.Sel vfi 


8. beforeDestroy 


9. destroyed 


销毁 。 如 果 有 离 3 


在 开始 销毁 实例 时 调用 。 此 时 实例 仍然 有 功能 。 


在 实例 被 销毁 之 后 调用 。 此 时 所 有 的 绑 定 和 实例 的 指令 已 经 解 绑 ， 所 有 的 子 实例 也 已 经 被 
离开 过 渡 ，destroyed 钩子 在 过 渡 完 成 之 后 调用 。 


11.4 开发 组 件 


11.4.1 ”基础 组 件 


如 果 我 们 要 3 


开发 更 大 型 的 网 页 或 Web 应 用 ，Web 组 件 化 的 思维 是 非常 重要 的 ， 这 也 是 今天 
整个 前 端 社区 长 久 不 衰 的 话题 。 那 么 如 何 开发 一 个 组 件 呢 ? 


在 以 往 的 一 些小 型 的 前 端 项 目 中 ， 我 们 习惯 把 逻辑 (script)、 视 图 Cview) 和 样式 (style) 


分 开 在 独立 的 


发 越 来 越 痛苦 ， 


录 当 中 ， 保 证 三 者 不 耦合 在 一 起 。 但 是 随 着 项 目 越 来 越 大 ， 这 样 的 结构 会 让 开 
比如 要 增加 或 修改 某 个 view 时 ， 就 要 在 script 和 sytle 里 找到 对 应 这 个 view 的 
逻辑 和 样式 进行 修改 。 


为 了 避免 随 着 项 


app/components 
| 一 picker 
| | 一 picker. 
| | 一 picker. 
| L— picker. 
L— button 
| 一 Dutton . 
| 一 Dutton . 


L— button . 


目 增 大 带 来 的 难于 维护 ,我们 开始 尝试 前 端 组 件 化 ,把 view 拆 分 成 不 同 的 


组 件 (component)， 为 单个 组 件 编写 对 应 的 逻辑 和 样式 : 


ejs 
js 
css 
ejs 
js 
css 
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i» 
HE 


这 本 


的 开发 模式 ， 不 仅 可 以 提高 代码 的 可 维护 性 和 可 重用 性 ， 还 有 


利于 团队 之 间 的 协作 ， 


一 个 组 件 由 一 个 人 去 维护 ， 更 好 地 实现 分 治 。 六 运 的 是 ， 随 着 React 越 来 越 火 ， 组 件 化 的 开发 


模式 也 就 越 来 越 被 大 家 接受 了 。 


和 view。 这 样 做 的 好 处 是 使 组 件 更 加 直观 ， 而 坏处 是 目前 有 些 编辑 器 对 .vue 的 语法 


在 Vuejs 中 ,可 以 利用 一 个 .vue X 


牛 实现 组 件 化 , 而 不 需要 对 每 个 组 件 分 别 建立 style、script 


= 


太 好 。 每 个 文件 就 是 一 个 组 件 ， 同 时 还 包含 了 组 件 之 间 的 依赖 关系 ， 整 个 组 件 从 乡 
特性 再 到 依赖 关系 都 一 览 无 余 。 下 面 给 出 一 个 简单 的 button 组 件 。 代 码 示 例如 下 : 


<template> 
<button class-"didi-btn" 
:class="{ 


'disable': disabled, 


'didi-btn-highlight': highlight 


y" 


@click="handleClick ($event) "><slot></slot></button> 


</template> 


<script> 
export default { 
name: 'dd-button', 
props: { 
disabled: Boolean, 
highlight: Boolean 
), 
methods: { 
handleClick: function (event) 
if (this.disabled) { 
event.preventDefault () 


event.stopPropagation() 


} 


</script> 


<style> 


支持 还 是 不 
观 到 结构 到 
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.didi-btn { 
display: block; 
padding: 0; 
width: 100$; 
height: 40px; 
line-height: 37px; 
border-radius: 4px; 
cursor: pointer; 
text-align: center; 
vertical-align: middle; 
touch-action: manipulation; 
background-image: none; 
white-space: nowrap; 
outline: none; 
font-size: 16px; 
color: #878787; 
background: #fafafa; 
border: lpx solid #ccc; 
box-sizing: border-box 
} 
.didi-btn.active,.didi-btn:active { 
background: #ebebeb 
} 
.didi-btn.disable,.didi-btn:disabled { 


background: #fafafa; 


border: lpx solid #e5e5e5; 
color: #ccc 

} 

.didi-btn-highlight { 

background: #fa8919; 

color: #fff; 

border: none 

} 

.didi-btn-highlight.active,.didi-btn-highlight:active { 

background: #e67el7 

} 

.didi-btn-highlight.disable,.didi-btn-highlight:disabled { 

background: #e5e5e5; 

color: #fff; 


border: none 
} 
</style> 
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同时 ， 还 可 以 在 *.vue 文件 中 使 用 其 他 预 处 理 


<style lang="stylus"> 


= 


.my-component h2 
color red 


</style> 


<template lang="jade"> 
div.my-component 
h2 Hello from {{msg}} 
</template> 


<script lang="babel"> 


// 利用 Babel 编译 ES2015 


export default { 
data () { 
return { 


msg: 'Hello from Babel!' 


使 用 Webpack 就 可 以 自动 将 .vue 文件 编译 成 正常 的 JavaScript 代码 ,我 们 只 需要 在 Webpack 
中 配置 好 vue-loader 即 可 (关于 Webpack， 第 25 章 将 详细 介绍 )。 代 码 示 例如 下 : 


module.exports = { 
entry: { 
app: './src/main.js' 
), 
output: { 
path: config.build.assetsRoot, 


publicPath: config.build.assetsPublicPath, 


filename: '[name].js' 
), 
resolve: { 
extensions: ['', '.js', '.vue'], 
fallback: [path.join( dirname, '../node modules')], 
alias: { 


Src': path.resolve(  dirname, Ys stety; 
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'assets': path.resolve( dirname, '../src/assets'), 
'components': path.resolve( dirname, '../src/components') 
} 
}, 
resolveLoader: { 
fallback: [path.join( dirname, '../node modules')] 
), 
module: { 
preLoaders: [ 


{ 
test: /\.vue$/, 
loader: 'eslint', 
include: projectRoot, 


exclude: /node_modules/ 


test: /N.js$/, 
loader: 'eslint', 
include: projectRoot, 
exclude: /node modules/ 

} 

l; 
loaders: [ 

{ 
test: /\.vue$/, 
loader: 'vue' 

), 

{ 
test: /N.js$/, 
loader: 'babel', 
include: projectRoot, 
exclude: /node modules/ 

}, 

{ 
test: /N.json$/, 
loader: 'json' 

), 

{ 
test: /N.htm1$/, 


loader: 'vue-html' 
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), 
{ 
test: /\.(png|jpe?g|gif|svg) (N?.*) ?$/, 
loader: 'url', 
query: { 
limit: 10000, 


name: utils.assetsPath('img/[name].[hash:7]. [ext] ') 


test: /N. (woff2?|eot|ttflotf) (\?.*) ?$/, 
loader: 'url', 
query: { 

limit: 10000, 


name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 


] 
), 
eslint: { 
formatter: require('eslint-friendly-formatter') 
), 
vue: 1 


loaders: utils.cssLoaders () 


EMAR, dE—A BIER. ER XE ET ER CHE IR] EH, BEZT f 
开发 ， 也 方便 复 用 和 维护 。 另 外 ，Vue,js 本 身 支持 对 组 件 的 异步 加 载 ， 配 合 Webpack 的 分 块 打 
包 功 能 ， 可 以 极其 轻松 地 实现 组 件 的 异步 按 需 加 载 。 


Tr 


11.4.2 ”基于 第 三 方 组 件 开发 


民 多 时 候 我 们 在 开发 一 些 组 件 时 ， 需 要 引入 第 三 方 组 件 库 ， 对 其 进行 封装 以 满足 项 目 
需求 。 下 面 介绍 如 何 基于 Chartjs 开发 。 代 码 示 例如 下 : 


a 


<template> 
<canvas class="vchart {{chartType}}-chart" v-el:chart-canvas :width="width":height= 
"height"> 


</canvas> 
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</template> 
<script> 


import Chart from 'chart.js' 


module.exports = { 
props: { 
chartType: { 
type: String, 
default: 'line' 
), 
width: { 
type: Number 
), 
height: { 
type: Number 
), 
labels: { 
type: Array, 


validator (value) { 


return value.every(label => typeof label === 'string') 
), 
default () ( return [] } 
), 
datasets: { 


type: Array, 
validator (value) { 
return value.every(series => { 
return Array.isArray(series.data) && series.data.every(val => { 
return typeof val === 'number' 
} 
} 
), 
coerce (val) { 
return JSON.parse(JSON.stringify (val) ) 
), 
default () ( return [] } 
), 
options: { 
type: Object, 
default () ( return {} } 
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), 
responsive: { 
type: Boolean, 
default: null 
), 
legend: { 
coerce (val) { 
if (typeof val === 'boolean') { 
return {display: val} 
} 
), 
default: null 
} 
), 
methods: { 
parseCommonOptions (options) { 


// xesponsive 


if (this.responsive !-- null) ( 
options.responsive - this.responsive 

} 

// legend 

if (this.legend !== null) { 


options.legend = this.legend 


return options 
} 
), 
computed: { 
chartData () { 
return { 
labels: this.labels, 
datasets: this.datasets 
} 
), 
chartOptions () ( 
let options = {} 


options = this.parseCommonOptions (options) 
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if (this.parseCustomOptions) { 


options = this.parseCustomOptions (options) 


return Object.assign(this.options, options) 
} 
), 
watch: { 
datasets: { 
// don't need deep 
handler (val, oldVal) { 
this.chartInstance.data.datasets = val 


this.chartInstance.update () 


} 
), 
data () { 
return { 
chartInstance: null 
} 
), 
ready () { 
const chartCanvas = this.S$els.chartCanvas 
const ctx = chartCanvas.getContext('2d') 
this.chartInstance = new Chart(ctx, { 
type: this.chartType, 
data: this.chartData, 
options: this.chartOptions 


} 


} 
</script> 


组 件 使 用 : 


<template> 
<div id="app"> 
<dd-chart :datasets="datasets" :labels="labels" 
</dd-chart> 
</div> 


</template> 


:width="width" 


:height="height"> 
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«script» 


import ddChart from './components/ddChart 


export default { 


data: 
return { 
width: 
height: 
labels: 
datasets: 
label: 
data: 


[110, 


[100, 


[50, 


function () ( 


500, 
200, 
pa Hi 


'2H', '3BH', !'4H', '5 H', 


(t 
' 数 据 一 '， 


90, 100, 81, 106, 75, 88] 


' 数 据 二 ' ， 


80, 90, 71, 96, 65, 78] 


80, 61, 86, 55, 68] 


51, 76, 45, 58] 


41, 66, 35, 48] 


31, 56; 257-38) 


"us, 


30, 40, 21, 46, 15, 28] 


'6H'1, 
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components: { 


ddChart 


} 
</script> 


效果 如 图 11-10 所 示 。 


110 
100 
90 


1H 2H 3H 4H 5H 6H 


图 11-10 chart 


11.5 ”常见 问题 解析 


1. camelCase & kebab-case 


HTML 标签 中 的 属性 名 不 区 分 大 小 写 。 设 置 prop 名 字 为 camelCase 形式 的 时 候 ， 需 要 转换 
为 kebab-case 形式 〈 短 横 线 隔 开 ) 在 HTML 中 使 用 。 代 码 示例 如 下 : 
Vue.component('child', 


// 这 里 可 以 是 camelCase 形式 


props: 'myMessage'], 


template: '<span>{{ myMessage }}</span>' 
}) 
«1-- 对 应 在 HTML 中 必须 是 短 横 线 分 隔 --> 
«child my-message="hello!"></child> 
2. 字面 量 语法 & 动 态 语 法 
初学 者 常 犯 的 一 个 错误 是 使 用 字面 量 语法 传递 数值 。 代 码 示 例如 下 : 
<!-- 传递 了 一 个 字符 串 "1" -- 
«comp some-prop="1"></comp> 
因为 它 是 一 个 字面 prop， 它 的 值 是 字符 串 "1"， 而 不 是 以 实际 的 数字 传 下 去 。 如 果 想 传递 一 
个 真实 的 JavaScript 类 型 的 数字 ， 则 需要 使 用 动态 语法 ， 从 而 让 它 的 值 被 当 作 JavaScript 表达 式 
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计算 。 代 码 示例 如 下 : 


<l- 传递 实际 的 数字 --> 


<comp :some-prop="1"></comp> 
3. 组 件 选 项 问题 


传 入 Vue 构造 器 的 多 数 选项 也 可 以 用 在 Vue.extend0 中 , 不 过 有 两 个 特例 : data 和 el. 试想 ， 
如 果 简 单 地 把 一 个 对 象 作为 data 选项 传 给 Vue.extend0， 代 码 示 例如 下 ; 


var data = a: 1 } 


var MyComponent = Vue.extend ({ 
data: data 
} 


这 样 做 的 问题 是 MyComponent 所 有 的 实例 将 共享 同一 个 data 对 象 ! 这 基本 不 是 我 们 想 要 
的 ， 因 此 应 当 使 用 一 个 函数 作为 data 选项 ， 让 这 个 函数 返回 一 个 新 对 象 。 代 码 示例 如 下 : 


var MyComponent = Vue.extend ({ 


data: function () ( 


return { a: 1 } 


4. 模板 解析 
Vue 的 模板 是 DOM 模板 ， 使 用 浏览 器 原生 的 解析 器 而 不 是 自己 实现 一 个 。 相 比 字符 串 模 
lk, DOM 模板 有 一 些 好 处 ， 但 是 也 有 问题 ， 它 必须 是 有 效 的 HTML 片段 。 一 些 HTML 元 素 对 
什么 元 素 可 以 放 在 它 里 面 有 限制 。 常 见 的 限制 有 : 


c 


O a 不 能 包含 其 他 的 交互 元 素 〈 如 按钮 、 链 接 )。 


O ul 和 ol 只 能 直接 包含 1i。 


O select 只 能 包含 option 和 optgroup. 


O table 只 能 直接 包含 thead、tbody、tfoot、tr、caption、col、colgroup。 


O tr 只 能 直接 包含 也 和 td. 


在 实际 应 用 中 ， 这 些 限 制 会 导致 意外 的 结果 。 尽 管 在 简单 的 情况 下 它 可 能 可 以 工作 ， 但 是 
我 们 不 能 依赖 自 定 义 组 件 在 浏览 器 验证 之 前 的 展开 结果 。 例 如 <my-select><option>...</option> 
</my-select> 不 是 有 效 的 模板 ， 即 使 my-select 组 件 最 终 展开 为 <select>...</select>。 
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男 一 个 结果 是 ， 自 定义 标签 (包括 自 定义 元 素 和 特殊 标签 ， 如 <component>、<template>、 
<partial>) 不 能 用 在 ul、select、table 等 对 内 部 元 素 有 限制 的 标签 内 。 放 在 这 些 元 素 内 部 的 自 定 
义 标签 将 被 提 到 元 素 的 外 面 ， 因 而 演 染 不 正确 。 


自 定义 元 素 应 当 使 用 is 特性 ， 代 码 示 例如 下 : 


«table» 
«tr is="my-component"></tr> 


«/table» 


<template> 不 能 用 在 <table> 内 ， 这 时 应 使 用 <tbody>，<table> 可 以 有 多 个 <tbody>。 代 码 示 例 
如 下 : 


<table> 


«tbody v-for="item in items"» 
«tr»Even row</tr> 
«tr»Odd row</tr> 
«/tbody» 
«/table» 


5. 动态 组 件 与 异步 组 件 结合 

上 面 的 章节 中 分 别 讲 述 了 动态 组 件 和 异步 组 件 ， 这 里 简单 展示 一 下 它们 如 何 结合 且 可 以 像 
正常 组 件 一 样 ， 通 过 props 传递 数据 (其 中 template 用 了 两 种 形式 展现 ， 只 是 为 了 表达 它 有 多 
种 展现 方式 ， 如 何 使 用 需要 针对 业务 场景 来 区 分 ， 此 处 只 是 为 了 演示 )。 代 码 示 例如 下 : 


<body id="example"> 


I 


Den 


<input type="radio" id-"one" value="fast" v-model-"currentView"» 
<label for="one">fast</label> 
<br> 
<input type="radio" id="two" value="bus" v-model="currentView"> 
<label for="two">bus</label> 


<br> 


Den 


<input type="radio" id="two" value="business" v-model-"currentView"» 


<label for="two">business</label> 
<template id="business"> 

<div>{ {msg} illii 7 4-«/div» 
«/template» 


«template id="fast"> 
«div» ( {msg}} 滴 滴 快 车 </div> 
</template> 
<component :is="currentView" :msg="hello"></component> 
</body> 
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«script» 
var bus = Vue.component('bus', function (resolve, reject) 
setTimeout(function () { 
resolve(í 
props: ['msg'], 
template: '«div @click="show">{{msg}} 滴 滴 巴 士 </div>'， 


data: function(){ return {} }, 
methods: { 
show: function () { 
alert ("haha~") 


var business = Vue.extend({ 
// 声明 props 
props: ['msg'], 
template: '#business', 
replace: true 

} 

var fast = Vue.extend({ 
// Fel] props 
props: ['msg'], 
template: '#fast', 
replace: true 

} 

// 创建 根 实例 


new Vue ({ 


el: '#example', 

data: { 
currentView: 'fast', 
hello:'hi' 

), 

components: { 
tasti fast, 
bus: bus, 
business: business 

} 

} 
</script> 


{ 
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6. 


如 何 解 决 数 据 层级 结构 太 深 的 问题 


在 开发 业务 时 ， 经 常会 出 现 异 步 获取 数据 的 情况 ， 有 时 候 数据 层次 比较 深 。 代 码 示例 如 下 : 


«span c] 


lass-"airport" 


v-text-"ticketInfo.flight.fromSegments[ticketInfo.flight.fromSegments.length - 
1].depAirportZh"» 


</span> 
我 人 


vm. $set 


] 可 以 使 用 vm.$set 手动 定义 一 层 数 据 ， 代 码 示例 如 下 : 


("depAirportZh" ,ticketInfo.flight.fromSegments[ticketInfo.flight.fromSegment 


S.length - 1].depAirportZh) 


现在 我 们 来 看 一 下 $set 方法 。 


参数 : 
{String} keypath 
{*} value 

用 法 : 


设置 Vue 实例 的 属性 值 。 在 多 数 情 况 下 应 当 使 用 普通 对 象 语法 ， 如 vm.a.b = 123。 这 个 方 


Q 


Q 


法 只 用 于 下 面 情况 : 


使 用 keypath 动态 地 设置 


Fal 
LE 


设置 不 存在 的 属性 。 


WA keypath 不 存在 ， 将 递归 地 创建 并 建立 退 踪 。 如 果 用 它 创建 一 个 顶级 属性 ， 实 例 将 被 


强制 进入 “digest 循环 ” 在 此 过 程 中 重新 计算 所 有 的 Watcher。 代 码 示例 如 下 : 


var vm = new Vue({ 


data: 


// keypath 存在 


vm.$set 


{ 


Grasp tyo 2) 


vm.a.b // -» 2 


// keypath 不 存在 
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vm.$set('c', 3) 
vm.c // -> 3 


7.， 后 端 数据 交互 
如 果 配 合 vue-resource， 代 码 示 例如 下 ; 


new Vue ({ 
el: 'fapp', 
data: { 
todos: [ ] 
), 
created: function() { 
this.$http 
.get (' 我 们 的 代码 体 ') 
.then((data) => { 
this.todos = data; 


如 果 配 合 jQuery 的 AJAX， 代 码 示 例如 下 : 


new Vue ({ 
el: '#app', 
data: { 
todos: [ ] 
), 
created: function() { 
$.get (' 我 们 的 API') 
.done((data) => { 
this.todos = data; 


8. data 中 没有 定义 计算 属性 ， 它 是 如 何 被 使 用 的 
代码 示例 如 下 : 


<div id="example"> 
a={{ a }}, b={{ b }} 


</div> 


var vm = new Vue({ 


el: '#example', 
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computed: { 
b: function () { 


return this.a + 1 


II 


对 于 上 面 计算 属性 b 是 怎么 被 使 用 的 ， 源 码 定义 如 下 : 


<!-- 源 码 目录 : src\instance\internal\state.js 207 ff--> 


Vue.prototype. initComputed = function () { 
var computed = this.Soptions.computed 
if (computed) { 
for (var key in computed) { 
var userDef = computed[key] 
var def = { 
enumerable: true, 
configurable: true 
} 
if (typeof userDef === 'function') { 
def.get = makeComputedGetter(userDef, this) 
def.set = noop 
b else 4 
def.get = userDef.get 
? userDef.cache !== false 
? makeComputedGetter (userDef.get, this) 
bind(userDef.get, this) 
noop 
def set. = userDer.set 
? bind(userDef.set, this) 
noop 
} 
Object.defineProperty(this, key, def) 


这 里 并 没有 把 计算 数据 放 到 $data 里 面 去 ， 而 是 通过 Object.defineProperty(this, key, def) 直接 


定义 到 了 实例 上 。 
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表单 校 验 在 Web 应 用 中 是 很 重要 
表单 进行 校 验 ， 以 下 讲解 均 基于 vue-validator 2.1.3 版 本 ， 后 面 


插件 对 


123 ”安装 


的 一 环 , 在 Vue.js 应 用 中 ,我 们 可 以 使 用 vue-validator 2.1.3 


介绍 将 不 加 版 本 号 了 。 


vue-validator 提供 了 npm、bower、 手 动 编译 等 安装 方式 ， 可 以 根据 业务 需要 选择 其 中 一 种 


方式 进行 安装 。 下 面 


1. 


npm 


i 介绍 npm 和 手动 编译 两 种 安装 方式 的 安装 方法 及 适合 场景 。 


当 业 务 代 码 使 用 Webpack 等 文 持 CommonJS 规范 的 模块 化 打包 器 来 构建 时 , 可 以 使 用 npm 
包 的 方式 来 安装 : 


$ npm install vue-validator 


大 


C Vue.js 


象 是 否 存在 ， 如 果 存 在 则 会 自 
Vue.use(Vue Validator) 2 tft far Be 3 T 4 


7j vue-validator 是 Vue.js 的 一 个 插件 , 所 以 vue-validator 需要 使 ) 
此 方法 来 注册 插件 ) 注册 到 Vue 对 象 上 ， 在 vue-validator 内 部 会 检测 window. Vue 对 
动 调用 VueuseQ 方法; 否则 需要 使 用 者 手动 调用 


4 Vue.use(PluginContructor) 


F 注 册 到 Vue P. Æ Webpack 等 支持 CommonJS 规范 的 环境 
中 ，Vue 对 象 并 不 会 暴露 到 全 局 window 对 象 中 ， 而 是 会 通过 module.exports 形式 输出 ， 因 此 需 


要 使 用 者 手动 注册 。 代 码 示例 如 下 : 
var Vue = require('vue'); 
var VueValidator = require('vue-validator'); 


// 安装 vue-validator 


Vue.use (VueValidator) ; 
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2. 手动 编 译 
当 想 尝试 一 些 Vue 中 并 未 发 布 的 新 特性 时 ， 可 以 直接 clone 源码 ， 手 动 构建 来 实现 。 
在 未 正式 发 布 之 前 ， 有些 特性 可 能 会 被 移 除 , 所 以 不 建议 在 生产 环境 中 使 用 手动 编译 方式 安装 。 
执行 以 下 命令 


git clone https://github.com/vuejs/vue-validator.git node modules/vue-validator 


cd node modules/vue-validator 


npm install 


Ur Ur A UY 


npm run build 


12.2 ”基本 使 用 


为 了 快速 入 门 ， 我 们 来 看 一 个 完整 的 例子 。 代 码 示例 如 下 : 


new Vue ({ 
el: 'fapp' 
} 


<div id="app"> 
<validator name="validation"> 
<form novalidate> 
<div class="username-field"> 
<label for="username">username:</label> 
<input id="username" type="text" v-validate:username-"['required']"» 
</div> 
<div class="comment-field"> 
<label for="comment">comment :</label> 
<input id="comment" type="text" v-validate:comment="{ maxlength: 256 }"> 
</div> 
<div class="errors"> 
<p v-if="Svalidation.username.required">Required your name.</p> 
<p v-if-"$validation.comment.maxlength"»Your comment is too long.</p> 
«/div» 
<input type="submit" value="send" v-if-"$validation.valid"» 
</form> 
</validator> 


</div> 


FANT HY LAS By BEBE OA LC ae LSE TE validator 自 定义 元 素 指 令 中 ， 而 在 要 校 验 的 表单 控 
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ni 


件 元 素 的 v-validate 属性 上 绑 定 相应 的 校 验 规 则 。 验 证 结果 会 保存 在 组 件 实例 的 $validation 属性 


F, $validation 是 由 validator 元 素 的 name 属性 和 $ 前 级 组 成 的 。 


ik: validator 元 素 的 name 属性 请 不 要 使 用 Vue.js 中 内 置 的 属性 名 称 ， 如 $event。 


12.3 ”验证 结果 结构 


在 12.2 节 中 ,我 们 了 解 到 vue-validator 将 验证 结果 存储 在 组 件 实例 上 以 validator 元 素 name 
站 值 及 $ 前 级 为 键 名 的 属性 下 。 下 面 我 们 来 看 一 下 验证 结果 的 结构 。 代 人 码 示 例如 下 : 


UE 


m 


// 表单 整体 验证 结果 


valid: true, 


invalid: false, 
touched: false, 
undefined: true, 
dirty: false, 
pristine: true, 
modified: false, 
errors: [{ 
field: 'fieldl', validator: 'required', message: 'required fieldl' 
Eros i 
field: 'fieldX', validator: 'customValidator', message: 'invalid fieldx' 
)], 
// 字段 一 验证 结果 
fieldl: 4 


required: false, 

// vue-validator 内 置 校 验 器 ， 表 示 是 否 已 填写 ，true 表示 校 验 通 过 ，false 表示 校 验 失 败 
email: true, // 自 定义 校 验 器 

url: 'invalid url format', // 自 定义 校 验 器 


customValidatorl: false, // 自 定义 校 验 器 
// 校 验 状态 属性 


valid: false, 


invalid: true, 
touched: false, 
undefined: true, 


dirty: false, 
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pristine: true, 
modified: false, 
errors: [{ 
validator: 'required', message: 'required fieldl' 
1] 
} r 
// 字段 Xx 验证 结果 
fieldx: { 
min: false, // 内 置 校 验 器 
customValidator: true, 
// 校 验 状 态 属 性 
valid: false, 
invalid: true, 
touched: true, 
undefined: false, 
dirty: true, 
pristine: false, 
modified: true, 
errors: [{ 
validator: 'customValidator', message: 'invalid fieldX' 
)] 
} 
} 
从 以 上 校 验 结果 的 结构 中 我 们 可 以 了 解 到 ， 校 验 结果 由 两 部 分 组 成 ， 即 表单 整体 校 验 结果 
和 单个 字段 校 验 结果 。 
单个 字段 校 验 结果 包括 以 下 校 验 属 性 : 
O Valid 字段 校 验 是 否 通过 ， 通 过 返回 tue， 失 败 返回 false. 
O invalid 一 一 valid RR. 
O touched 一 一 校 验 字 段 所 在 元 素 获 得 过 焦点 时 返回 true, FURE false. 
O untouched 一 一 touched 取 反 。 
O modified 一 一 当 元 素 值 与 初始 值 不 同时 返回 true, FURE false. 
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O dirty 字段 值 改变 过 至 少 一 次 返回 true, MURE] false. 
O pristine 一 一 dirty 取 反 。 
O errors 如 果 校 验 没 通过 ， 则 返回 错误 字段 信息 数组 ， 否 则 返回 undefined. 


表单 整体 校 验 结果 包括 以 下 校 验 属性 : 


12.4 ”验证 器 语 ; 


v-validate 指令 语法 如 下 : 


O valid 所 有 学 段 校 验 是 否 通过 ， 通 过 返回 tue， 失 败 返 回 false. 

O invalid —— valid 取 反 。 

O touched 只 要 有 一 个 校 验 字 段 所 在 元 素 获 得 过 焦点 就 返回 true, TURE false. 
O untouched 一 一 touched 取 反 。 

O modified 一 一 只 要 有 一 个 字段 对 应 元 素 值 与 初始 值 不 同 就 返回 true, AURE false. 
O dirty 只 要 有 一 个 校 验 字 段 对 应 元 素 值 改变 过 至 少 一 次 就 返回 true, 否则 返回 false. 
O pristine —— dirty 取 反 。 

O errors 如 果 整 体 校 验 没 通过 ， 则 返回 错误 字段 信息 数组 ， 和 否则 返回 undefined. 


v-validate[:field]="array literal | object literal | binding" 


下 面 我 们 来 了 解 一 下 field 的 含义 ， 以 及 v-validate 校 验 规 则 的 格式 。 


12.4.1 校 验 字段 名 field 


field 用 来 标识 校 验 字段 ， 之 后 可 以 | 


«1-- ~1.4.4 版 本 校 验 语法 --> 


<form novalidate> 


iF BOR S|} 


在 vue-validator 版 本 小 于 等 于 2.0-alpha 时 ， 校 验 时 依赖 v-model 指令 。 代 码 示例 如 下 : 


<input type="text" v-model-"comment" v-validate-"minLength: 16, maxLength: 128"> 


«div» 
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<span v-show="validation.comment.minLength">Your comment is too short.</span> 
<span v-show-"validation.comment.maxLength"»Your comment is too long.</span> 
«/div» 
<input type="submit" value="send" v-if-"valid"» 


</form> 
在 2.0-alpha 及 以 后 版 本 中 ， 使 用 vvalidate 指令 进行 校 验 。 代 码 示例 如 下 : 
«1-- 2.0-alpha 及 以 后 版 本 校 验 语法 --> 


«validator name-"validation"» 


«form novalidate» 
<input type="text" v-validate:comment="{ minlength: 16, maxlength: 128 }"> 
«div» 
<span v-show-"$validation.comment.minlength"»Your comment is too short.</span> 
<span v-show="Svalidation.comment.maxlength">Your comment is too long.</span> 
</div> 
<input type="submit" value="send" v-if="valid"> 
</form> 


</validator> 


和 指令 命名 规则 一 样 ， 在 HTML 中 我 们 可 以 用 连 字符 〈-) 来 命名 field， 如 以 下 例子 中 的 
user-name， 然 后 通过 弦 峰 式 命名 法 来 引用 它 。 代 码 示例 如 下 : 


<validator name="validation"> 


<form novalidate> 
<input type="text" v-validate:user-name="{ minlength: 16 }"> 
<div> 
<span v-if-"$validation.userName.minlength"»Your user name is too short.</span> 
«/div» 
«/form» 


«/validator» 


当 需 要 动态 绑 定 校 验 字 段 的 名 称 时 ， 我 们 可 以 在 要 校 验 的 元 素 上 使 用 field 属性 。 代 码 示例 
如 下 : 


<div id="app"> 
<validator name="validation"> 


pi 


<form novalidate> 
<p class="validate-field" v-for="field in fields"» 
«label :for="field.id">{{field.label}}</label> 


<input type="text" :id-"field.id" :placeholder="field.placeholder" field="{{field. 
name}}" v-validate-"field.validate"» 


</p> 
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<pre>{{ $validation | json }}</pre> 
</form> 
</validator> 
</div> 
new Vue ({ 
el: 'fapp', 
data: { 
fields: [{ 
idi 
label: 


'username', 

'username', 
name: 'username', 
placeholder: 'input your username', 


validate: { required: true, maxlength: 


), { 
ids 
label: 


'message', 

'message', 
name: 'message', 
placeholder: 'input your message', 


validate: { required: true, minlength: 
1] 
} 


} 


12.4.2” 校 验 规则 定义 


] 来 定义 校 验 规则 ， 


v-validate 指令 


性 名 。 
1. 数组 字面 量 


当 校 验 器 不 需要 额外 参数 时 ， 我 们 可 以 使 用 数组 字 
出 现 就 代表 该 校 验 器 所 在 元 素 是 必 填 项 。 代 码 示例 如 下 : 


<validator name="validation"> 
<form novalidate> 
Zip: 


<div> 


16 


8 


} 


其 值 可 以 是 数组 字 


i 量 、 组 件 实 例 数据 属 


E WAF 


Ir 


j 量 的 形式 。 如 required 校 验 器 ， 只 要 


«input type="text" v-validate:zip="['required']"><br /> 


<span v-if="$validation.zip.required">Zip code is required.</span> 


</div> 
</form> 


</validator> 
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2.， 对 和 象 字面 量 


对 象 字 面 量 语法 适合 需要 额外 参数 的 校 验 器 。 如 限制 输入 长 度 的 校 验 器 minlength， 需 要 说 
明 最 小 长 度 限制 是 多 少 。 代 码 示 例如 下 : 


<validator name-"validation"» 


<form novalidate> 
ID: «input type="text" v-validate:id="{ required: true, minlength: 3, maxlength: 
16 }"><br /» 
«div» 
<span v-if="$validation.id.required">ID is required</span> 
<span v-if="$validation.id.minlength">Your ID is too short.</span> 
<span v-if="$validation.id.maxlength">Your ID is too long.</span> 
</div> 
</form> 


</validator> 


我 们 还 可 以 使 用 对 象 字 面 量 语法 通过 rule 字段 来 自 定义 验证 规则 。 代 码 示例 如 下 : 


«validator name-"validation"» 


«form novalidate» 


ID: «input type="text" v-validate:id-"( minlength: { rule: 3 }, maxlength: { rule: 
16 } }"><br /> 


«div» 
<span v-if-"$validation.id.minlength"»Your ID is too short.</span> 
<span v-if-"$validation.id.maxlength"»Your ID is too long.</span> 

</div> 

</form> 


</validator> 
3. 实例 数 据 属性 


v-validate 的 值 可 以 是 组 件 实例 的 数据 属性 ， 这 样 可 以 用 来 动态 绑 定 校 验 规则 。 代 码 示例 
如 下 : 


new Vue ({ 


el: 'fapp', 
datas. { 
rules: { 
minlength: 3, 
maxlength: 16 
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} 
} 
<div id="app"> 
<validator name="validation"> 


<form novalidate> 


ID: <input type="text" v-validate:id="rules"><br /> 


<div> 


<span v-if="$validation.id.minlength">Your ID is too short.</span> 


<span v-if-"$validation.id.maxlength"»Your ID is too long.</span> 


</div> 
</form> 
</validator> 


</div> 


4. 5 terminal 指令 同时 使 用 


“4455 v-if. v-for 等 terminal 指令 同时 使 用 时 ， 需 要 把 可 验证 的 目 
大 


类 的 不 可 见 标签 内 。 
中 。 代 码 示例 如 下 : 


new Vue ({ 


el: 'fapp', 
data: { 


enable: true 


} 
<div id="app"> 
<validator name="validation"> 
<form novalidate> 
<div class="username"> 
«label for="username">username:</label> 
<input id="username" type="text" 
@valid="this.enable = true" 
@invalid="this.enable = false" 
v-validate:username-"['required']"» 
«/div» 
<div v-if="enable" class="password"> 


<label for="password">password:</label> 


ERICA B2 TE «template? Z. 


A v-validate 指令 不 能 与 terminal FES ANE, DrELEAUZEYE T div 7638 


<input id="password" type="password" v-validate:password="{ 
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required: { rule: true }, minlength: { rule: 8 } 
}"/> 
<div> 
</form> 
</validator> 


</div> 


12.5 “内置 验证 规则 


为 了 提高 开发 效率 , vue-validator 为 我 们 提供 了 一 些 常用 的 内 置 的 验证 规则 , 如 图 12-1 所 示 。 


S| required |- 输入 值 不 能 为 空 
—€| pattern | 必须 匹配 pattern 表 示 的 正则 表达 式 
©) minlength ”一 一 一 柱 入 值 长 度 不 能 小 于 minlength 表 示 的 什 
E 
i 9 maxlength }—— s&&A(BEIA SEXT maxlengthzr85íB 
— min Fr HAET h TF mins 898 
SƏ max [|—— 输入 信 不 能 大 于 max 雪 示 的 值 


图 12-1 内置 验证 规则 


12.5.1 required 


必 填 校 验 器 ， 该 校 验 器 用 来 校 验 字段 值 是 否 不 为 空 。 
可 以 使 用 该 校 验 器 的 元 素 有 : 


Q input[type="text"] 
Q input[type-"radio"] 
Q input[type-"checkbox"] 


O input[type-"number"] 
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Q input[type-"password"] 
O input[type-"email"] 

O input[type-"tel"] 

O input[type-"url"] 

O select 

O textarea 

源码 定义 如 下 : 


<!-- 源 码 目录 : src/validators.js --> 


export function required (val) { 
if (Array.isArray(val)) { 
if (val.length !== 0) { 
let valid = true 
for (let i= 0, 1 = val.length; i < 1; i++) { 
valid = required(val[i]) 
if (!valid) { 


break 


} 
return valid 
p etse- { 
return false 
} 
else if (typeof val === 'number' || typeof val === 'function') { 
return true 
else if (typeof val === 'boolean') { 
return val 
else if (typeof val === 'string') { 
return val.length > 0 
else if (val !== null && typeof val === 'object') { 
return Object.keys(val).length > 0 


else if (val === null || val === undefined) { 


return false 
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12.5.2 pattern 


正则 匹配 校 验 器 ， 校 验 元 素 值 是 否 匹 配 pattern 所 表示 的 正则 表达 式 。 


可 以 使 用 该 校 验 器 的 元 素 有 : 


Q input[type-"text"] 


O input[type-"number"] 
Q input[type="password"] 
O input[type-"email"] 

O input[type-"tel"] 

O input[type-"url"] 

O textarea 

源码 定义 如 下 : 


<!-- 源 码 目录 : src/validators.js --> 


export function pattern (val, pat) { 
if (typeof pat !== 'string') { return false } 
let match = pat.match(new RegExp('^/(.*?)/([gimy]*)$')) 
if (!match) { return false ] 


return new RegExp(match[1], match[2]).test (val) 


12.5.3 minlength 


最 小 长 度 校 验 器 ， 校 验 元 素 的 长 度 是 否 大 于 minlength. 
可 以 使 用 该 校 验 器 的 元 素 有 : 


Q input[type-"text"] 
O input[type-"checkbox"] 


O input[type-"number"] 
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Q input[type-"password"] 
O input[type-"email"] 

O input[type-"tel"] 

O input[type-"url"] 

O select 

O textarea 

源码 定义 如 下 : 


<!-- 源 码 目录 : src/validators.js --> 


export function minlength (val, min) { 

if (typeof val === 'string') { 

return isInteger(min, 10) && val.length »- parseInt(min, 10) 
else if (Array.isArray(val)) ( 

return val.length >= parseInt (min, 10) 

else i 


return false 


12.5.4 maxlength 


最 大 长 度 校 验 器 ， 校 验 元 素 的 长 度 是 否 小 于 maxlength. 


可 以 使 用 该 校 验 器 的 元 素 有 : 


O input[type-"text"] 

O input[type-"checkbox"] 
Q input[type="number"] 
O input[type="password"] 
O input[type-"email"] 

Q 


input[type-"tel"] 
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Q input[type-"url"] 
O select 


O textarea 


源码 定义 如 下 : 


<!-- 源 码 目录 : src/validators.js --> 


export function maxlength (val, max) { 
if (typeof val === 'string') { 


return isInteger (max, 10) && val.length <= parseInt (max, 10) 


else if (Array.isArray(val)) ( 


return val.length <= parseInt (max, 10) 


else { 


return false 


12.5.5 min 


最 小 长 度 校 验 器 ， 校 验 元 素 的 值 是 否 大 于 min 的 值 。 


可 以 使 用 该 校 验 器 的 元 素 有 : 


Q input[type-"text"] 


O input[type-"number"] 


O textarea 


源码 定义 如 下 : 


<!-- 源 码 目录 : src/validators.js --> 


export function min (val, arg) { 


return !isNaN(+(val)) && !isNaN(+(arg)) && (+(val) >= +(arg)) 


12.5.6 max 


最 大 长 度 校 验 器 ， 校 验 元 素 的 值 是 否 小 于 max 的 值 。 
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可 以 使 用 该 校 验 器 的 元 素 有 : 


O input[type-"text"] 


Q input[type-"number"] 


O textarea 


源码 定义 如 下 : 


<!-- 源 码 目 录 : src/validators.js --> 


export function max (val, arg) { 


return !isNaN(+(val)) && !isNaN(+(arg)) && (+(val) <= +(arg)) 


12.6 5 v-model 同时 使 用 


vue-validator 会 自动 校 验 通过 v-model 动态 设置 的 值 。 代 码 示 例如 下 : 


«div id-"app"» 


<validator name-"validationl"» 
«form novalidate» 


message: «input type="text" v-model="msg" v-validate:message-"( required: true, 
minlength: 8 }"><br /> 


«div» 
<p v-if="Svalidationl.message.required">Required your message.</p> 
<p v-if="Svalidationl.message.minlength">Too short message.</p> 
</div> 
</form> 
</validator> 
</div> 
var vm = new Vue({ 
el: 'fapp', 
data: { 


msg: '' 


setTimeout(function () { 
vm.msg = 'hello world!!' 


), 2000) 
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12.7 ” 重 置 校 验 结 


m 
uf 


我 们 可 以 通过 在 Vue 组 件 实例 上 调用 $resetValidation() 方 法 来 动态 习 
如 下 : 


<div id="app"> 


校 验 结果 。 代 码 示 例 


<validator name-"validationl"» 
<form novalidate> 
«div class-"username-field"» 
<label for="username">username:</label> 
<input id-"username" type="text" v-validate:username-"['required']"» 
«/div» 
<div class="comment-field"> 
<label for="comment">comment :</label> 
<input id="comment" type="text" v-validate:comment="{ maxlength: 256 }"> 
</div> 
<div class-"errors"» 
<p v-if="$validationl.username.required">Required your name.</p> 
<p v-if="$validationl.comment.maxlength">Your comment is too long.</p> 
</div> 
<input type="submit" value="send" v-if="Svalidationl.valid"> 
«button type="button" @click="onReset">Reset Validation</button> 
</form> 
<pre>{{ $validationl | json }}</pre> 
</validator> 
</div> 
new Vue ({ 
el: 'fapp', 
methods: { 
onReset: function () { 


this.$resetValidation() 


12.8 FETCH 


由 于 表单 元 素 checkbox. radio. select 等 的 特殊 性 ， 我 们 有 必要 单独 介绍 一 下 vue-validator 
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在 这 些 表单 元 素 上 的 使 用 。 


FHE checkbox: 


<div id="app"> 


<validator name="validationl"> 


<form novalidate> 


<hl>Survey</h1> 


<fieldset> 


<legend>Which do you like fruit ?</legend> 


<input id="apple" type="checkbox" value="apple" v-validate:fruits="{ 


required: { rule: true, message: requiredErrorMsg }, 

minlength: { rule: 1, message: minlengthErrorMsg }, 

maxlength: { rule: 2, message: maxlengthErrorMsg } 
es. 


label for="apple">Apple</label> 


< 
<input id="orange" type="checkbox" value="orange" v-validate:fruits> 
<label for="orange">Orage</label> 

< 


input id="grape" type="checkbox" value="grape" v-validate:fruits> 


<label for="grape">Grape</label> 


A 


input id="banana" type="checkbox" value="banana" v-validate:fruits> 


<label for="banana">Banana</label> 


<ul class="errors"> 


li v-for="msg in $validationl.fruits.errors"» 
<p>{ (msg) )«/p» 
</li> 


</ul> 


</fieldset> 


</form> 


</validator> 


</div> 


new Vue ({ 


el: 


‘#app', 


computed: { 


requiredErrorMsg: function () { 


return 'Required fruit !!' 


iz" 


minlengthErrorMsg: function () { 


return 'Please chose at least 1 fruit !!' 


be 
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maxlengthErrorMsg: function () { 


return 'Please chose at most 2 fruits !!' 


单 选 钮 radio 


<div id="app"> 


<validator name="validationl"> 
<form novalidate> 
«hl»5Survey«c/hl» 
«fieldset» 
<legend>Which do you like fruit ?</legend> 
<input id-"apple" type="radio" name-"fruit" value-"apple" v-validate:fruits-"[( 
required: ( rule: true, message: requiredErrorMsg } 
}"> 
«label for="apple">Apple</label> 
<input id="orange" type="radio" name-"fruit" value-"orange" v-validate:fruits> 
label for="orange">Orage</label> 
input id="grape" type="radio" name-"fruit" value="grape" v-validate:fruits» 
label for="grape">Grape</label> 


input id="banana" type="radio" name-"fruit" value-"banana" v-validate:fruits> 


<label for="banana">Banana</label> 


<ul class="errors"> 


<li v-for="msg in $validationl.fruits.errors"» 
<p>{ {msg} }</p> 
</li> 
</ul> 
</fieldset> 
</form> 
</validator> 
</div> 
new Vue ({ 
el: 'fapp', 
computed: { 
requiredErrorMsg: function () { 


return 'Required fruit !!' 
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下 拉 列 表 select: 


<div id="app"> 
<validator name="validationl"> 
<form novalidate> 
<select v-validate:lang="{ required: true }"> 
<option value="">----- select your favorite programming language ----- «/option» 
<option value-"javascript"»JavaScript«/option» 
«option value="ruby">Ruby</option> 
<option value="python">Python</option> 
<option value-"perl"»Perl«/option» 
<option value="lua">Lua</option> 


<option value="go">Go</option> 


<option value="rust">Rust</option> 
<option value="elixir">Elixir</option> 


<option value="c">C</option> 


<option value="none">Not listed here</option> 
</select> 
<div class-"errors"» 
<p v-if="$validationl.lang.required">Required !!</p> 
</div> 
</form> 
</validator> 
</div> 


new Vue(( el: '#app' }) 


12.9 ”各 校 验 状态 对 应 的 class 


为 了 提升 用 户 体验 ， 有 时 候 我 们 需要 基于 校 验 结果 来 对 表单 元 素 应 用 不 同 的 样式 。 
vue-validator 会 基于 校 验 结果 自动 在 元 素 上 添加 一 些 校 验 状 态 的 class。 代 码 示例 如 下 : 


<input id-"username" type="text" v-validate:username="{ 


required: { rule: true, message: 'required you name !!' } 


} "> 


在 页 面 初始 化 后 ， 以 上 代码 的 输出 结果 类 似 于 : 


<input id-"username" type="text" class-"invalid untouched pristine"> 
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各 校 验 状 态 对 应 的 class 如 表 12-1 所 示 。 


表 12-1 各 校 验 状 态 对 应 的 class 
校 验 状 态 对 应 class (上 默认) 
valid valid 


invalid invalid 


touched touched 


untouched untouched 


pristine pristine 


dirty dirty 


modified modified 


12.9.1 自 定义 校 验 状态 class 


有 了 时候 我 们 可 能 需要 使 用 自 定义 的 状态 class, 这 时 我 们 可 以 通过 classes 属性 来 自 定 义 各 状 
态 对 应 的 class。 代 人 码 示例 如 下 : 


«validator name-"validationl" 


:classes="{ touched: 'touched-validator', dirty: 'dirty-validator' }"> 
«label for="username">username:</label> 


<input id="username" 


type="text" 

:classes-"( valid: 'valid-username', invalid: 'invalid-username' }" 

v-validate:username="{ required: { rule: true, message: 'required you name !!' } J"» 
«/validator» 


iE: classes 属性 只 能 在 validator 元 素 或 应 用 了 v-validate 的 元 素 上 使 用 有 效 。 


12.9.2 在 其 他 元 素 上 使 用 校 验 状态 class 


一 般 校 验 状态 class 会 被 添加 到 v-validate 指令 的 元 素 上 ， 有 了 时候 我 们 需要 将 class 添加 到 
v-validate 指令 所 在 元 素 的 包 囊 元 素 上 ， 这 时 我 们 可 以 在 相应 的 包 庄 元 素 上 使 用 v-validate-class 
BS. 。 代 码 示 例如 下 : 


«validator name-"validationl" 


:classes="{ touched: 'touched-validator', dirty: 'dirty-validator' }"> 
<div v-validate-class class="username"> 


<label for="username">username:</label> 
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<input id-"username" 


type="text" 
:classes="{ valid: 'valid-username', invalid: 'invalid-username' }" 
v-validate:username-"( required: { rule: true, message: 'required you name !!' } 
}"> 
</div> 
</validator> 


在 页 面 初始 化 后 ， 以 上 代码 的 输出 结果 为 : 


<div class="username invalid-username untouched pristine"» 


<label for="username">username:</label> 
<input id-"username" type="text"> 


</div> 


12.10 “分 组 校 验 


vue-validator 支持 分 组 校 验 。 如 输入 密码 时 , 我 们 可 以 将 第 一 次 输入 密码 与 再 次 输入 密码 确 
认 放 入 同一 个 校 验 组 内 ， 只 有 两 次 校 验 都 通过 了 ， 该 组 校 验 才 算 通过 。 代 码 示例 如 下 : 


«validator name-"validationl" :groups="['passwordGroup']"> 
username: «input type="text" v-validate:username="['required']"><br> 
password: <input type="password" group-"passwordGroup" v-validate:password="{ minlength: 8, 


required: true }"/><br> 


confirm password: <input type="password" group="passwordGroup" v-validate:password- 
confirm="{ minlength: 8, required: true }"/><br> 


<span v-if="$validationl.username.invalid">Invalid username!</span><br> 
<span v-if="$validationl.passwordGroup.invalid">Invalid password input!</span> 


</validator> 


以 上 代码 只 有 当 password 规则 和 password-confirm 规则 都 校 验 通过 后 ,passwordGroup.valid 
才 会 返回 true。 


12311 错误 信息 


在 校 验 失败 时 , 我 们 需要 获得 相应 的 错误 提示 信息 , 错误 信息 可 以 直接 存储 在 校 验 规则 中 。 
代码 示例 如 下 : 


<validator name="validationl"> 


<div class-"username"» 
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<label for="username">username:</label> 
<input id="username" type="text" v-validate:username="{ 
required: { rule: true, message: 'required you name !!' } 
)"» 
<span v-if-"$validationl.username.required"» 
{{ $validationl.username.required }} 
</span> 
</div> 
<div class="password"> 
<label for="password">password:</label> 


<input id="password" type="password" v-validate:password-"( 


required: { rule: true, message: 'required you password !!' }, 
minlength: { rule: 8, message: 'your password short too !!' } 
}"/> 


<span v-if="Svalidationl.password.required"> 
{{ Svalidationl.password.required }} 
</span> 
<span v-if="Svalidationl.password.minlength"> 
{{ Svalidationl.password.minlength }} 
</span> 
</div> 


</validator> 
1. 输出 所 有 错误 信息 


如 果 需 要 输出 当前 所 有 校 验 失败 的 错误 信息 ， 则 可 以 通过 v-for 指令 来 循环 errors 数组 。 代 
码 示 例如 下 : 


«validator name="validationl"> 


<div class="username"> 
<label for="username">username:</label> 
<input id="username" type="text" v-validate:username="{ 
required: { rule: true, message: 'required you name !!' } 
}"> 
</div> 
<div class="password"> 
<label for="password">password:</label> 
<input id="password" type="password" v-validate:password="{ 
required: { rule: true, message: 'required you password !!' }, 
minlength: { rule: 8, message: 'your password short too !!' } 


}"/> 
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«/div» 
<div class="errors"> 
<ul> 


<li v-for="error in $validationl.errors"» 


<p>{{error.field}}: {{error.message}}</p> 
</li> 
</ul> 
</div> 
</validator> 


2. 输出 单个 校 验 错误 信息 
我 们 可 以 输出 单个 校 验 规则 或 者 单个 分 组 的 错误 信息 。 代 码 示例 如 下 : 


<div id="app"> 


«validator :groups-"['profile', 'password']" name-"validationl"» 

<div class-"username"» 
«label for="username">username:</label> 
<input id="username" type="text" group-"profile" v-validate:username-"( 

required: { rule: true, message: 'required you name !!' } 

} "> 

«/div» 

<div class="url"> 
<label for="url">url:</label> 


<input id="url" type="text" group="profile" v-validate:url-"( 


required: { rule: true, message: 'required you name !!' }, 
url: ( rule: true, message: ‘invalid url format' } 
}"> 
</div> 


<div class-"old"» 
«label for-"old"»old password:</label> 


<input id-"old" type="password" group="password" v-validate:old="{ 


required: { rule: true, message: 'required you old password !!' }, 

minlength: { rule: 8, message: 'your old password short too !!' } 
}"/> 
</div> 


<div class="new"> 
«label for="new">new password:</label> 
<input id-"new" type="password" group-"password" v-validate:new="{ 
required: { rule: true, message: 'required you new password !!' }, 


minlength: { rule: 8, message: 'your new password short too !!' } 


第 12 章 表单 校 验 177 


}"/> 
</div> 
<div class="confirm"> 
<label for="confirm">confirm password:</label> 


<input id="confirm" type="password" group="password" v-validate:confirm="{ 


required: { rule: true, message: 'required you confirm password !!' }, 

minlength: { rule: 8, message: 'your confirm password short too !!' } 
}"/> 
</div> 


<div class="errors"> 
«validator-errors group="profile" :validation="$validationl"> 
</validator-errors> 
</div> 
</validator> 
</div> 
Vue.validator('url', function (val) { 
return /^(httpN:V/N/ |httpsN:N/N/) (.(4,)) $/. test (val) 
} 
new Vue({ el: '#app' }) 


12.11.1 错误 信息 输出 组 件 


在 上 节 示 例 中 ， 我 们 使 用 v-for 指令 来 遍历 输出 错误 信息 。 在 vue-validator 中 ， 可 以 使 用 
validator-errors 组 件 来 更 便捷 地 输出 错误 信息 。 代 码 示例 如 下 : 


«validator name="validationl"> 


<div class="username"> 
«label for="username">username:</label> 
<input id-"username" type="text" v-validate:username="{ 

required: { rule: true, message: 'required you name !!' } 

}"> 

</div> 

<div class="password"> 
<label for="password">password:</label> 


<input id="password" type="password" v-validate:password="{ 


required: { rule: true, message: 'required you password !!' }, 
minlength: { rule: 8, message: 'your password short too !!' } 
jS 


«/div» 


178 Vuejs 权威 指南 


<div class-"errors"» 
«validator-errors :validation-"$validationl"»«/validator-errors» 
«/div» 


«/validator» 
在 页 面 初始 化 后 ， 以 上 代码 的 输出 结果 类 似 于 : 


<div class-"username"» 


«label for="username">username:</label> 
<input id-"username" type-"text"» 
«/div» 
<div class-"password"» 
«label for="password">password:</label> 
<input id="password" type-"password"» 
</div> 
<div class-"errors"» 
<div> 
<p>password: your password short too !!</p> 
</div> 
<div> 
<p>password: required you password !!</p> 
</div> 


<div> 


A 


p>username: required you name !!</p> 


</div> 


</div> 


如 果 不 喜 欢 默 认 的 错误 信息 模板 ， 我 们 还 可 以 自 定义 错误 信息 模板 ，validator-errors 提供 了 
Component 模板 、Partial 模板 两 种 定义 方式 。 


1. Component 模板 
<div id="app"> 
<validator name-"validationl"» 

<div class="username"> 
<label for="username">username:</label> 
<input id="username" type="text" v-validate:username="{ 

required: { rule: true, message: 'required you name !!' } 

}"> 

</div> 


<div class-"password"» 
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«label for="password">password:</label> 


<input id="password" type="password" v-validate:password-"( 


required: { rule: true, message: 'required you password !!' }, 

minlength: { rule: 8, message: 'your password short too !!' } 
}"/> 
</div> 


<div class="errors"> 
«validator-errors :component-"'custom-error'" :validation-"$validationl"» 
</validator-errors> 
</div> 
</validator> 
</div> 
Vue.component('custom-error', { 
props: ['field', 'validator', 'message'], 
template: '«p class="error-{{field}}-{{validator}}">{ {message} }</p>' 
} 
new Vue({ el: '#app' }) 


2. Partial 模板 


<div id="app"> 
<validator name="validation1l"> 

<div class-"username"» 
«label for="username">username:</label> 
<input id="username" type="text" v-validate:username="{ 

required: { rule: true, message: 'required you name !!' } 

}"> 

</div> 

<div class-"password"» 
<label for="password">password:</label> 


<input id="password" type="password" v-validate:password-"( 


required: { rule: true, message: 'required you password !!' }, 

minlength: { rule: 8, message: 'your password short too !!' } 
}"/> 
</div> 


<div class="errors"> 
«validator-errors partial="myErrorTemplate" :validation-"$validationl"» 
</validator-errors> 
</div> 
</validator> 


</div> 
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Vue.partial('myErrorTemplate', '<p>{{field}}: {{validator}}: {{message}}</p>') 


new Vue(( el: '#app' }) 


12.112 ”动态 设置 错误 信息 


在 服务 端 验证 失败 时 ， 我 们 可 以 用 组 件 实 例 方法 $setValidationErrors 来 动态 设置 错误 信息 。 
代码 示例 如 下 : 


<div id="app"> 


<validator name="validation"> 
<div class="username"> 
<label for="username">username:</label> 
<input id="username" type="text" v-model-"username" v-validate:username="{ 
required: { rule: true, message: 'required you name !!' } 
} "> 
«/div» 
<div class-"old"» 
«label for-"old"»old password:</label> 
<input id-"old" type="password" v-model-"passowrd.old" v-validate:old="{ 
required: { rule: true, message: 'required you old password !!' } 
ym 
«/div» 
<div class="new"> 
<label for="new">new password:</label> 


<input id="new" type="password" v-model-"password.new" v-validate:new="{ 


required: { rule: true, message: 'required you new password !!' }, 

minlength: { rule: 8, message: 'your new password short too !!' } 
}"/> 
</div> 


<div class="confirm"> 
«label for="confirm">confirm password:</label> 


<input id="confirm" type="password" v-validate:confirm="{ 


required: { rule: true, message: 'required you confirm password !!' }, 
confirm: { rule: passowd.new, message: 'your confirm password incorrect !!' } 
}"/> 
</div> 


<div class="errors"> 
<validator-errors :validation="$validation"></validator-errors> 


</div> 
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<button type="button" v-if="$validation.valid" @click.prevent="onSubmit">update</button> 
</validator> 
</div> 
new Vue ({ 
el: 'fapp', 
data: { 
ids 1, 
username: '', 
password: { 


olds i"; 


validators: { 
confirm: function (val, target) { 


return val === target 


), 
methods: { 
onSubmit: function () { 
var self - this 
var resource = this.$resource('/user/:id') 
resource.save({ id: this.id j, { 
username: this.username, 
password: this.new 
}, function (data, stat, req) { 
// 成 功 回调 
// 
)).error(function (data, stat, req) { 
// handle server error 
self.$setValidationErrors([ 
( field: data.field, message: data.message } 
jj 
} 
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12312 ”事件 


在 校 验 状态 发 生变 化 时 ,vue-validator 会 触发 相应 的 事件 , 我 们 可 以 通过 Vue.js ' 


册 方 法 来 注册 相关 事件 。vue-validator 会 触发 单个 字段 校 验 事件 和 整个 表单 校 验 事件 。 


12.12.1 单个 字段 校 验 事件 


o 


rr 


L 


对 于 每 个 v-validate 所 在 元 素 ， 我 们 可 以 监听 以 下 事件 : 


O valid 一 一 当 字 上段 验 证 结果 变 为 有 效 时 触发 。 
O invalid 一 一 当 字 上 段 验 证 结果 变 为 无 效 时 触发 。 


O touched 一 一 当 字 段 失去 焦点 时 触发 。 


O dirty 当 字 段 值 首次 变化 时 触发 。 


O modified 一 一 当 字 段 值 与 初始 值 不 同时 或 变 回 初始 值 时 触发 。 


<div id="app"> 


<validator name="validationl"> 
«div class="comment-field"> 

<label for-"comment"»comment:«/label» 

<input type="text" 
@valid="onValid" 
@invalid="onInvalid" 
@touched="onTouched" 
@dirty="onDirty" 
@modified="onModified" 


v-validate:comment-"['required']"/» 


<p>{ {occuredValid}}</p> 

p>{ {occuredInvalid}}</p> 
p>{ {occuredTouched} }</p> 
p>{ {occuredDirty}}</p> 

p>{ {occuredModified}}</p> 


</div> 


</validator> 


5; 
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</div> 
new Vue ({ 
el: 'fapp', 
datas 1 
occuredValid: '', 
occuredInvalid: '', 
occuredTouched: '', 
occuredDirty: '', 
occuredModified: '' 
), 
methods: { 
onValid: function () { 
this.occuredValid = 'occured valid event' 
this.occuredInvalid = '' 
), 
onInvalid: function () { 
this.occuredInvalid = 'occured invalid event' 
this.occuredValid = '' 
), 
onTouched: function () { 
this.occuredTouched = 'occured touched event' 
), 
onDirty: function () { 
this.occuredDirty = 'occured dirty event' 
), 
onModified: function (e) { 


this.occuredModified = 'occured modified event: ' + e.modified 


} 
} 


12.12.2 ”整个 表单 校 验 事件 


除了 监听 单个 字段 的 校 验 事件 ， 我 们 也 可 以 在 validator 元 素 上 监听 整个 表单 的 校 验 
在 validator 元 素 上 我 们 可 以 监听 以 下 事件 ， 


O valid 一 一 当 全 局 验证 结果 变 为 有 效 时 触发 。 


O invalid 一 一 当 全 局 验证 结果 变 为 无 效 时 触发 。 


事件 。 


pan 
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O touched 当 任意 验证 字段 失去 焦点 时 触发 。 


O dirty — 当 任意 字段 首次 改变 时 触发 。 


O modified 一 一 当 任 意 字 段 首 次 改变 时 或 所 有 字段 恢复 初始 值 时 触发 。 


«div id-"app"» 
<validator name-"validationl" 
@valid="onValid" 


@invalid="onInvalid" 


@touched="onTouched" 
@dirty="onDirty" 
@modified="onModified"> 
<div class="comment-field"> 
<label for="username">username:</label> 
<input type="text" 
v-validate:username="['required']"/> 
</div> 
<div class="password-field"> 
<label for="password">password:</label> 
<input type="password" 
v-validate:password="{ required: true, minlength: 8 }"/> 
</div> 
<div> 
<p>{ {occuredValid}}</p> 
<p>{ {occuredInvalid} }</p> 
<p>{ {occuredTouched} }</p> 
<p>{ {occuredDirty}}</p> 
<p>{ {occuredModi fied} }</p> 


</div> 


</validator> 


data: { 
occuredValid: '', 
occuredInvalid: '', 
occuredTouched: '', 
occuredDirty: '', 


occuredModified: 
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), 
methods: { 
onValid: function () { 
this.occuredValid = 'occured valid event' 
this.occuredInvalid = '' 
), 
onInvalid: function () { 
this.occuredInvalid = 'occured invalid event' 
this.occuredValid = '' 
), 
onTouched: function () { 
this.occuredTouched = 'occured touched event' 
), 
onDirty: function () { 
this.occuredDirty = 'occured dirty event' 
), 
onModified: function (modified) { 


this.occuredModified = 'occured modified event: ' + modified 


12.13 ”延迟 初始 化 


一 二 


在 validator 元 素 上 设置 lazy 属性 可 以 延迟 校 验 ， 只 有 在 组 件 实例 上 调用 $activateValidator 
方法 才 会 初始 化 校 验 。 当 要 校 验 的 数据 需要 异步 加 载 时 ， 该 特性 可 以 避免 数据 加 载 之 前 出 现 错 
误 提 示 。 


当 评 论 数据 从 服务 端 返回 时 ， 才 进行 校 验 。 代 码 示例 如 下 : 


«div» 


<hl>Preview</h1> 
<p>{ {comment} ) «/p» 
<validator lazy name-"validationl"» 


<input type="text" :value-"comment" v-validate:comment="{ required: true, maxlength: 
256- jy 


<span v-if-"$validationl.comment.required"»Required your comment</span> 
<span v-if-"$validationl.comment.maxlength"»Too long comment !!</span> 


<button type-"button" value-"save" @click="onSave" v-if-"valid"» 
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</validator> 
</div> 
Vue.component('comment', { 
props: { 


id: Number, 
he 


data: function () { 
return { comment: '' } 
), 
activate: function (done) { 
var resource = this.Sresource('/comments/:id'); 
resource.get({ id: this.id }, function (comment, stat, req) 
this.commont = comment.body 
// Wd validator 
this.SactivateValidator () 
done () 
).bind(this)).error(function (data, stat, req) { 
// Wark KWL 
done () 
} 
), 
methods: { 
onSave: function () { 


var resource = this.$resource('/comments/:id'); 


resource.save({ id: this.id }, { body: this.comment }, function 


// 请 求 成 功 多 各 
)).error(function (data, sta, req) { 


// 请 求 失败 逻辑 


12.14 ” 自 定义 验证 器 


除了 内 置 的 验证 器 ， 我 们 也 可 以 根据 需求 自 定义 验证 器 。 


{ 
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12.14.1 注册 自 定义 验证 器 
我 们 可 以 通过 全 局 或 局 部 两 种 注册 方式 来 注册 验证 器 。 
1. 全 局 注册 
// E-mail 格式 验证 器 
Vue.validator('email', function (val) ( 
return /^(([^«» 0) [N1NN. 7: NSGN" ] E (N. [^<> OO [NIN 2,7 :NS8N"] 2) *) | (NI FA") e CON ECO- 
9] (1,3). [0-91 (1,3) V. [0-9] {1,3}\. [0-9] (1, 3) M ]) | (([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.t 
est(val) 
} 
new Vue ({ 
el: 'fapp' 
data: { 
email: '' 


<div id="app"> 


<validator name="validation1l"> 


address: <input type="text" v-validate:address="['email']"><br /> 


<div> 


<p v-show="Svalidationl.address.email">Invalid your mail address format.</p> 


</div> 
<validator> 


</div> 
2. 局 部 注册 


可 以 通过 组 件 的 validators 选项 来 注册 只 能 在 组 件 内 使 
表示 校 验 通过 ， 返 回 false 表示 校 验 失败 。 


下 例 中 注册 了 numeric 和 url 两 个 自 定义 验证 器 。 


new Vue ({ 


el: '#app', 


的 验证 


器 。 验 证 器 方法 返回 


validators: ( // ^numeric? and `url` custom validator is local registration 


numeric: function (val/*,rule*/) { 
return /*[-+]?[0-9]+$/.test (val) 
Fy 


url: function (val) { 


true 
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return /^(httpN:NV/M/|httpsN:N/N/) (.(4,)) $/. test (val) 


«div id-"app"» 


«validator name="validation1l"> 


username: «input type="text" v-validate:username-"['required']"»«br /> 


email: «input type="text" v-validate:address-"['email']"»«br /> 


age: «input type="text" v-validate:age-"['numeric']"»«br /> 


site: <input type="text" v-validate:site-"['url']"»«br /> 


<div class="errors"> 


<p v-if="$validationl.username.required">required username</p> 


<p v-if="$validationl.address.email">invalid email address</p> 


<p v-if="$validationl.age.numeric">invalid age value</p> 


<p v-if-"$validationl.site.url"»invalid site uril format</p> 


</div> 
<validator> 


</div> 


12.14.02 错误 信息 


x. 


在 注册 自 定 义 验 证 器 时 ， 我 们 可 以 指定 校 验 未 通过 时 的 错误 信息 。 代 码 示 例如 下 : 


一 < 


// 全 局 注册 `email、 


Vue.validator('email', { 
message: 'invalid email address', // 校 验 未 通过 时 错误 信息 


check: function 


定义 验证 器 


(val) // define validator 


return /^ (G^ 0 ENINN. 2: NS8N" ] F(A. [^2 O [NJNN. 72 :NS8N ] 1) ) LATENT) CON [LO- 
9] (1,3) N. [0-9] (1, 3) N. [0-91 (1, 3) V. [0-9] (1, 3) N]) | (([a-zA-Z\-0-9]+\.)+[a-zA-Z2] (2, )) ) $/.t 


est(val) 
} 
} 


// 重 置 内 置 验证 器 required 校 验 未 通过 时 错误 信息 
Vue.validator('required', { 
message: function (field) { // 校 验 未 通过 时 错误 信息 


return 'required "' + field + '" field' 


Is 
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check: Vue.validator('required') // 调用 内 置 验证 器 
} 


new Vue ({ 


el: 'fapp', 


validators: { 
numeric: ( // 注册 numeric 自 定义 验证 器 
message: 'invalid numeric value', 


check: function (val) { 
return /*[-+]?[0-9]+$/.test (val) 


url: ( // 注册 url 自 定 义 验证 器 ， 用 来 验证 输入 的 url 是 否 合法 


message: function (field) { 


return ‘invalid "' + field + '" url format field' 
), 
check: function (val) { 
return /*(http\:\/\/|https\:\/\/) (.{4,})$/.test (val) 


<div id="app"> 

<validator name-"validationl"» 
username: <input type="text" v-validate:username="['required']"><br /> 
email: <input type="text" v-validate:address="['email']"><br /> 
age: <input type="text" v-validate:age-"['numeric']"»«br /> 
site: <input type="text" v-validate:site-"['url']"»«br /> 
<div class="errors"> 

<validator-errors :validation-"$validationl"»«/validator-errors» 

</div> 

<validator> 


</div> 


12.15 ” 自 定 义 验 证 时 栅 


在 默认 情况 下 ，vue-validator 会 在 初始 化 完成 后 根据 validator 和 v-validate 指令 自动 进行 验 
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TT 


证 。 但是， 有 时 候 在 初始 化 时 我 们 3 
规则 来 关闭 自动 验证 。 代 码 示例 如 


<div id="app"> 


不 需要 验证 ， 这 时 可 以 通过 initial 属性 或 者 v-validate 验证 


4 


«validator name="validationl"> 
«form novalidate» 
<div class="username-field"> 


«label for="username">username:</label> 


<!-- 'inital' attribute is applied the all validators of target element (e.g. 
required, exist) --> 
<input id="username" type="text" initial="off" v-validate:username="['required', 


'exist']"» 
«/div» 
<div class="password-field"> 
<label for="password">password:</label> 
<!-- 'initial' optional is applied with "v-validate' validator (e.g. required only) --> 


<input id="password" type="password" v-validate:passowrd="{ required: { rule: true, 
initial: 'off' }, minlength: 8 }"> 


</div> 
<input type="submit" value="send" v-if="Svalidationl.valid"> 
</form> 
</validator> 


</div> 

在 validator 初始 化 完成 后 ，vue-validator 会 在 DOM 元 素 的 input, blur. change 事件 触发 
时 自动 验证 。 可 以 使 用 detect-change 和 detect-blur 属性 来 关闭 这 些 事件 的 自动 验证 。 代 码 示 
例如 下 : 


<div id="app"> 


<validator name="validation"> 
«form novalidate @submit="onSubmit"> 
«hl»user registrationc/hl» 
<div class="username"> 
<label for="username">username:</label> 
<input id="username" type="text" 
detect-change-"off" detect-blur-"off" v-validate:username="{ 
required: { rule: true, message: 'required you name !!' } 
)" /> 
«/div» 


<div class="password"> 
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«label for="password">password:</label> 
<input id="password" type="password" v-model-"password" 


detect-change-"off" detect-blur-"off" v-validate:password="{ 


required: ( rule: true, message: 'required you new password !!' }, 
minlength: { rule: 8, message: 'your new password short too !!' } 
)" /> 
«/div» 


<div class="confirm"> 
<label for="confirm">confirm password:</label> 
<input id="confirm" type="password" 


detect-change-"off" detect-blur-"off" v-validate:confirm-"( 


required: ( rule: true, message: 'required you confirm password !!' }, 
confirm: { rule: password, message: 'your confirm password incorrect !!' } 
)" /» 
«/div» 


«div class-"errors" v-if="Svalidation.touched"> 
«validator-errors :validation-"$validation"»«/validator-errors» 
</div> 
<input type="submit" value="register" /> 
</form> 
</validator> 
</div> 
new Vue ({ 
el: 'fapp', 
data: { 
password: '' 
), 
validators: { 
confirm: function (val, target) { 


return val === target 


), 
methods: { 
onSubmit: function (e) { 
// validate manually 
var self - this 


this.$validate(true, function () { 
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if (self.$validation.invalid) { 


e.preventDefault() 


12.316 “异步 验证 


当 需 要 在 服务 端 验证 数据 或 其 他 需要 异步 验证 的 场景 时 ， 我 们 可 以 使 用 vue-validator 的 异 
步 验证 功能 。 


12.16.1 注册 异步 验证 器 


异步 验证 器 的 注册 和 同步 验证 器 的 注册 流程 一 样 ， 唯 一 的 区 别 就 是 验证 器 方法 的 返回 值 不 
[E], 返回 以 下 两 种 类 型 的 值 都 为 异步 验证 器 。 下面 我 们 用 setTimeout 来 说 明 如 何 注册 异步 验证 器 。 


O 返回 值 为 function， 签 名 为 function(resolve, reject)。 调 用 resolve0 表 示 校 验 通 过 ， 调 用 
reject) ZR EAS AC, FB BERI: 
// 自 定义 异步 验证 器 


Vue.validator('exist', function (val) { 


return function (resolve, reject) { 
setTimeout(function () { 
if (Math.random() > .5) { 
// 校 验 通 过 
resolve(); 
) else ( 
// 校 验 失败 


reject(); 
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<div id="app"> 
<validator name="validation"> 
user: «input type="text" v-validate:user="['exist']"><br /> 
«div» 
<p v-show="Svalidation.user.exist">the user is already registered.</p> 
«/div» 
<validator> 


</div> 


O 返回 值 为 promise XJ 8. promise 被 resolve 表示 校 验 通过 ，promise 被 reject 表示 校 验 失 
败 。 代 码 示例 如 下 : 
// 自 定义 异步 验证 器 


Vue.validator('exist', function (val) { 


var promise = new Promise (function (resolve, reject) { 
setTimeout(function () { 
if (Math.random() > .5) { 
// 校 验 通 过 
resolve(); 
} else: T 
// 校 验 失 败 


reject(); 


// 返回 promise WK 


return promise; 
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«div id-"app"» 


«validator name-"validation"» 


«div» 


user: «input type="text" v-validate:user-"['exist']"»«br /> 


<p v-show="Svalidation.user.exist">the user is already registered.</p> 
«/div» 


<validator> 


</div> 


12.16.2 ”验证 器 函数 context 


验证 器 函数 context 是 绑 定 到 Validation 对 象 | 
HET KIF E 用 。 
1. vm 属性 
暴露 了 当前 验 训 


new Vue ({ 


data () { return { checking: false } }, 
validators: { 


exist (val) { 


this.vm.checking 


true // spinner on 
return fetch('/validations/exist', 


{ 
Ff xs 


)).then((res) -» ( // done 


this.vm.checking false // spinner off 
return res.json() 
)).then((json) => { 
return Promise.resolve() 
}).catch((error) => { 

return Promise.reject (error.message) 
} 


LA. Validation 对 象 提供 了 一 些 
FE 器 时 有 | 


= 


FE 所 在 的 Vue 实例 ， 代 码 示例 如 下 : 


HE 


E» TK HE Jg 
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暴露 了 当前 验证 器 的 目标 DOM 元 素 。 下 面 展示 了 结合 International Telephone Input jQuery 
插件 使 用 的 例子 。 


new Vue(í 


validators: { 
phone: function (val) { 


return $(this.el).intlTelInput('isValidNumber') 


第 3 s 
与 服务 端 通信 


Vue.js 可 以 构建 一 个 完全 不 依赖 后 端 服务 的 应 用 ， 同 时 也 可 以 与 服务 端 进行 数据 交互 来 同 
步 界面 的 动态 更 新 。Vue.js 本 身 并 没有 提供 与 服务 端 通信 的 接口 ， 但 是 通过 插件 的 形式 实现 了 
基于 AJAX、JSONP 等 技术 的 服务 端 通信 。 


vue-resource 是 一 个 通过 XMLHttpRequest 或 JSONP 技术 实现 异步 加 载 服 务 端 数据 的 Vue.js 


插件 。 该 插件 提供 了 一 般 的 uu 

HTTP 请 求 接口 和 RESTful 架构 A anc dE a 

请 求 接口 ， 并 且 提供 了 全 局 方法 RN 
和 Vue 组 件 实例 方法 。 一 般 的 SEE cone 
HTTP 请 求 接口 按照 调用 的 便捷 | iga 
程度 又 分 为 底层 方法 和 便捷 方 ool ar 
法 ， 便 捷 方法 是 对 底层 方法 的 封 = | ym pimp 
48, YE vue-resource 中 我 们 可 以 — O gus eben 


this.Shttp.delete 


全 局 配置 。 同 时 ， 它 提供 了 数据 nestle 
LT E. "ERA Vue.resource().get 
获 取 各 个 阶 段 的 4h] Y $ 使 得 我 1 ] Vue. a 


Vue.resource().query 


可 以 对 数据 3k 取 过 程 进 行 更 好 的 P 全 局 调用 Vue.resource().update 


Vue.resource().remove 


控 tl o 以 下 内 容 讲 解 都 是 基 于 Sry Vue.resource().delete 


TERL this.Sresource().get 
vue-resource 0.7.2 版 本 ， 后 面 介 this Sresource() save 
this.Sresource().query 


2H 中 就 不 加 版 本 E J- ó. O IH SIR this.Sresource().update 


this.Sresource().remove 
this.Sresource().delete 


T 


vue-resource 插件 提供 的 公 
开 方 法 总 览 图 如 图 13-1 所 示 。 


图 13-1 vue-resource 公 开 方 法 总 览 
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19.1 vue-resource 安装 及 配置 


13.1.1 安装 


vue-resource 提供 了 npm、bower、 手 动 编译 等 安装 方式 ， 可 以 根据 业务 需要 选择 其 中 一 种 
方式 进行 安装 。 三 种 安装 方式 的 安装 方法 及 适合 场景 如 下 : 
1. npm 


如 果 项 目 基 于 npm 包 方 式 来 开发 ， 则 可 以 使 ) 


命令 : 


] npm 来 安装 vue 和 vue-resource， 执 行 如 下 


= 


$ npm i vue vue-resource -save-dev 


然后 在 项 目 中 引入 Vue.js 和 vue-resource, 3 H.ZE Vue.js 中 注册 vue-resource 插件 ， 代 码 示 
例如 下 : 
// 引入 Vvue.js 和 vue-resource 
var Vue = require('vue'); 
var VueResource = require('vue-resource'); 
// 注册 vue-resource 插件 
// 注意 ， 假 如 Vue .js GAZE html 中 直接 引入 ， 则 不 需要 再 执行 此 步骤 
// 此 时 vue-resource 会 自动 调用 Vue .use 方法 来 注册 


Vue .use (VueResource); 

2. bower 

当 业 务 代码 使 用 bower 来 管理 时 ， 可 以 使 用 bower 安装 到 指定 目录 。 为 了 便于 举例 ， 假 定 
该 目录 为 js/vendor， 执 行 如 下 命令 : 


$ bower install vue-resource 


在 HTML F, Æ vue 文件 之 后 引入 vue-resource， 代 人 码 示例 如 下 : 


<!-- 引入 vue --> 


"d 


<script src="js/vendor/vue.js"></script> 
<!-- 引入 vue-resource --> 
<script src="js/vendor/vue-resource.js"></script> 
3， 手 动 编译 
当 想 尝试 一 些 Vue 中 并 未 发 布 的 新 特性 时 ， 可 以 直接 clone 源码 ， 手 动 构建 来 实现 。 由 于 
在 未 正式 发 布 之 前 ， 有 些 特 性 可 能 会 被 移 除 , 所 以 不 建议 在 生产 环境 中 使 用 手动 编译 方式 安装 。 
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执行 如 下 命令 : 
git clone https://github.com/vuejs/vue-resource.git 
cd vue-resource 


npm install 


4 Uu» vu 


npm run build 


编译 后 的 文件 在 dist 目录 


13.1.2 ”参数 配置 


vue-resource 将 请 求 配置 分 为 全 局 配置 、 组 件 实例 配置 和 调用 配置 三 部 分 。 这 三 部 分 的 优先 


级 依次 增高 ， 优 先 级 高 的 配置 会 覆盖 优先 级 低 的 配置 。 接 下 来 我 们 将 详 


置 。 现 在 让 我 们 先 来 看 一 下 全 局 配置 默认 参数 ， 如 图 13-2 所 示 。 


jsonp 
beforeSend 
crossOrigin |— = 
Vue.http.options 
emulateHTTP 


| emulateJSON 


timeout 


$ 


图 13-2 全 局 配置 option 属 性 


以 上 参数 的 详细 说 明 请 参阅 13.1.5 5. 


1， 全 局 配置 


Vue.http.options.root = '/root' 
2， 组 件 实例 配置 
在 实例 化 组 件 时 可 以 传 入 http 选项 来 进行 配置 ， 代 码 示 例如 下 : 


new Vue ({ 
htt 
root: '/root', 


headers: { 


讲解 每 部 分 应 如 何 配 


method 


headers 


xhr | 


upload 
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Authorization: 'Basic Yxsdlfjui' 


3. 方法 调用 时 配置 
在 调用 vue-resource 请 求 方法 时 传 入 选项 对 象 ， 代 码 示例 如 下 : 


new Vue ({ 


ready: function () { 
// get 请 求 
this.$http.get((url: '/someUrl', headers: { Authorization: 'Basic Yxsdlfjui'}}) 
.then(function (response) { 
// 请 求 成 功 回 调 
), function (response) { 
// 请 求 失 败 回 调 
} 


} 
}) 


13.1.3 headers 配置 


在 13.1.2 WP, 我 们 了 解 到 可 以 通过 headers 属性 来 配置 请 求 头 。 合 并 策略 遵循 参数 配置 合 
并 策略 。 除 了 参数 配置 headers 属性 可 以 设置 请 求 头 外 ， 在 vue-resource 中 也 提供 了 全 局 默认 的 
headers 配置 ， 如 图 13-3 所 示 。 


C put [| ('Content-Type': 'application/json') 
Ə post ('Content-Type': 'application/json') 
一 -一 S| patch | ('Content-Type': 'application/json') 
Vue.http.headers 
23 9 delete | ('Content-Type': 'application/json') 


S| common | ('Accept': 'application/json, text/plain, */*"} 


—| custom (X-Requested-With': 'XMLHttpRequest') 


图 13-3 ”全 局 默认 headers 配 置 
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在 图 13-3 P, 我 们 可 以 看 到 Vue.http.headers 键 值 可 以 是 HTTP 7715: 44. common, custom 


三 种 类 型 。 这 三 种 类 型 的 配置 会 进行 合并 ， 优 先 级 从 低 到 高 依次 是 common、custom、HTTP 


方法 名 。 


其 中 common 对 应 的 请 求 头 会 在 所 有 请 求 头 中 设置 ,custom 对 应 


HTTP 方法 名 对 应 的 请 求 头 上 只 有 在 请 求 的 method 匹配 


13.1.4 基本 HTTP 调用 


方法 名 时 才 会 被 设置 。 


的 请 求 头 在 非 路 域 时 设置 ， 


基本 HTTP 调用 即 普 通 的 GET. POST 等 基本 的 HTTP 操作 ， 实 际 上 执行 增 、 删 、 改 、 查 


是 前 后 端 开 发 人 员 共 同 约定 的 并 非 通 过 HTTP. 的 请 求 方法 如 GET 代表 获取 数据 、PUT 代表 写 入 


数据 、POST 代表 更 新 数据 。 后 者 为 RESTful 调用 ， 后 


底层 方法 和 便捷 方法 执行 后 返回 一 个 Promise 对 象 ,可 以 使 用 Promise 语法 来 注 


调 ， 详 情 请 参阅 13.1.10 节 。 


1， 底 层 方法 


(1) 全 局 调用 
Vue .http (option) 

(Q0 组 件 实例 调用 
this.$http (option) 


以 上 两 种 调用 方式 接受 相同 的 option 参数 ， 都 返 


四 我 们 会 详细 介绍 RESTful i 


HE. 


全 局 的 Vue.http 方法 和 Vue 组 件 的 实例 方法 this.$http 都 属于 底 
参数 的 method 属性 来 判断 请 求 方式 是 GET 还 是 POST， 抑 或 是 其 人 


E 册 成 


式 回 调 中 的 this 指向 window， 而 组 件 实例 调用 方式 回 


option 对 象 请 参阅 13.1.5 节 。 


调 指向 组 件 实例 。 


我 们 以 组 件 实例 调用 方式 为 例 来 了 解 一 下 如 何 发 送 POST 请 求 ， 代 码 示例 如 下 : 


new Vue ({ 


ready: function () 
// POST 请 求 
this.Shttp ({ 
url: '/book', 
method: 'POST', 


功 、 失 败 回 


屋 方法 ,它们 根据 所 传 option 
也 HTTP 的 合法 方法 。 


|E] Promise 对 象 。 不 同 的 是 ， 全 局 调用 方 
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// 请 求 体 中 发 送 的 数据 
data: { 


cats "T! 
), 
// 设置 请 求 头 
headers: 1 
'Content-Type': 'x-www-form-urlencoded' 
} 
)).then(function (response) { 
// 请 求 成 功 回 调 
), function (response) { 
// 请 求 失 败 回调 
} 


其 他 请 求 请 参阅 13.1.5 节 。 
2. 便捷 方法 


不 同 于 底层 方法 ， 便 捷 方 法 是 对 底层 方法 的 封装 ， 在 调用 时 可 以 省 去 配置 选项 option 中 的 
method 属性 。 以 下 为 vue-resource 提供 的 便捷 方法 列表 : 


O get(url, [data], [options]) 
Q post(url, [data], [options]) 
O put(url, [data], [options]) 
O patch(url, [data], [options]) 
Q 


delete(url, [data], [options]) 


O 


jsonp(url, [data], [options]) 


便捷 方法 接受 三 个 参数 : 


O url CFE), tub, Aya options 对 象 中 的 url 属性 覆盖 。 


O data〈 可 选 、 字 符 串 或 对 象 )， 要 发 送 的 数据 ， 可 被 options 对 象 中 的 data 属性 覆盖 。 


O options， 请 参阅 13.1.5 节 。 


202 ”Vue.js 权威 指南 


我 们 以 POST 请 求 为 例 来 了 解 便捷 方法 的 使 用 ， 代 码 示例 如 下 ; 


this.$http.post( 


'http://example.com/book/create', 
// 请 求 体 中 要 发 送 给 服务 端的 数据 
{ 


cats ts 


name: 'newbook' 
), 
{ 

'headers': { 


'Content-Type': 'x-www-form-urlencoded' 


} 
).then(function (response) { 
// 成 功 回调 
console.log(response.data) 
), function (response) { 
// 失败 回调 
console.log('something wrong') 
} 


13.1.5 请求 选 项 对 和 象 


在 调用 HTTP 请 求 方法 时 ， 可 以 传 入 选项 对 象 来 控制 请 求 。 例 如 : 
Vue.http (option) 

下 面 我 们 来 看 看 option 对 象 的 各 属性 及 含义 。 

1. url ( 字符 串 ) 


KI] URL 地 址 。 


a 


2. method ( 字符 串 ) 
默认 值 为 GET， 请 求 的 HTTP 方法 (GET. POST 等 )。 
3. data ( 对 象 或 字符 串 ) 


默认 值 为 "， 需 要 发 送 给 服务 端的 数据 。 注 意 ，data 属性 的 值 对 于 method 7j POST. PUT. 
DELETE 等 请 求 会 作为 请 求 体 来 传送 ， 对 于 GET、JSONP 等 方式 的 请 求 将 会 拼接 在 url 查询 参 
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数 中 。 
4. params ( 对 象 ) 


默认 值 为 入， 用 来 蔡 换 url 中 的 模板 变量 ， 模 板 变 量 中 未 匹配 到 的 民 
边 作 为 查询 参数 。 代 码 示 例如 下 : 


Vue.http(( 


性 添加 在 URL 地 址 后 


pam) 


url: 'http://example.com/{book}', 


params: { 
book: 'vue', 


cake TIS 


最 终 URL W http://example.com/vue?cat=1 - 

5. headers ( 对 象 ) 

SUEN HG RA HTTP 请 求 头 。 

6. xhr ( 对 象 ) 

默认 值 为 null， 该 对 象 中 的 属性 都 会 应 用 到 原生 xhr 实例 对 象 上 。 源 码 定义 如 下 : 


if ( .isPlainObject(request.xhr)) { 


| .extend(xhr, request.xhr); 
} 


7. upload ( 对 象 ) 
默认 值 为 null, 该 对 象 的 属性 都 会 应 用 到 原生 xhr 实例 对 象 的 upload 属性 上 。 源码 实现 如 下 : 


if ( .isPlainObject(request.upload)) { 


_.extend(xhr.upload, request.upload); 
} 


8. jsonp ( 字符 串 ) 
PRUE callback, JSONP 请 求 


Vue. http ({ 


回调 函数 的 名 字 。 代 码 示例 如 下 : 


url: 'http://example.com/book', 
method: 'JSONP', 
jsonp: 'cb' 

}) 
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ü 
o 


最 终 URL 地 址 为 http:/example.com/book?cb=xxx， 其 中 xxx Jy vue-resource Œ WK AY KEWL E 
源码 实现 如 下 : 


var callback = ' jsonp' + Math.random().toString(36).substr(2); 


request.params[request.jsonp] = callback; 


9. timeout ( 数值 ) 
默认 值 为 0， 单位 为 ms， 表 示 请 求 超时 时 间 ，0 表示 没有 超时 限制 。 超 时 后 ， 将 会 取消 当 
前 请 求 。vue-resource 内 部 通过 拦截 器 注入 超时 取消 逻辑 。 源 码 定义 如 下 : 


if (request.timeout) { 


timeout = setTimeout (function () { 
request.cancel(); 
), request.timeout); 
} 
// 超 时 后 Promise 会 被 reject， 错 误 回 调 会 被 执行 


10. beforeSend ( 函数 ) 
默认 值 为 null， 该 函数 接受 请 求 选 项 对 象 作为 参数 。 该 函数 在 发 送 请 求 之 前 执行 ， 
vue-resource 内 部 在 拦截 器 的 最 前 端 调 用 该 方法 。 源 码 定 义 如 下 : 


if ( .isFunction(request.beforeSend)) { 


request.beforeSend.call(this, request); 


11. emulateHTTP ( 布尔 值 ) 


默认 值 为 false， 当 值 为 true IN, HH HTTP 的 POST 方法 发 送 PUT. PATCH, DELETE 等 请 
求 ， 并 设置 请 求 头 字 段 HTTP-Method-Override 为 原始 请 求 方 法 。 源 码 定义 如 下 : 


if (request.emulateHTTP && /^(PUT|PATCH|DELETE)$/i.test(request.method)) { 


request.headers['X-HTTP-Method-Override'] = request.method; 


request.method = 'POST'; 


12. emulateJSON ( 布尔 值 ) 


默认 值 为 false, 当 值 为 true 并 且 data 为 对 象 时 , 设置 请 求 头 Content-Type 的 值 为 application/ 
x-www-form-urlencoded。 源 码 定义 如 下 : 


I 


if (request.emulateJSON &&  .isPlainObject(request.data)) { 
request.headers['Content-Type'] = 'application/x-www-form-urlencoded'; 


request.data =  .url.params (request.data) ; 
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13. crossOrigin ( 布尔 值 ) 


默认 值 为 null， 表 示 是 否 路 域 ， 如 果 没 有 设置 该 属性 ，vue-resource 内 部 会 判断 浏览 器 当前 
URL 和 请 求 URL 是 否 跨 域 。 源 码 定 义 如 下 : 


if (request.crossOrigin --- null) { 


un 
c 


request.crossOrigin = crossOrigin(request); 
} 
if (request.crossOrigin) { 
if (!xhrCors) { 
request.client = xdrClient; 
} 
request.emulateHTTP = false; 


如 果 最 终 crossOrigin 为 true 并 且 浏 览 器 不 支持 CORS， 即 不 支持 XMLHttpRequest2 时 ， 则 
会 使 用 XDomainRequest 来 请 求 。 目 前 XDomainRequest HA IE 8. IE 9 两 款 浏览 器 支持 用 来 进 
行 AJAX 跨 域 。XMLHttpRequest2 和 XdomainRequest 的 具体 细节 请 参阅 13.1.9 节 。 


13.1.6 response 对 象 


response 对 象 包含 服务 端 返 回 的 数据 ， 以 及 HTTP 响应 状态 、 响 应 头等 信息 。 下 面 展示 了 
response 对 象 的 各 属性 及 其 含义 。 


O data WARMER): 服务 端 返回 的 数据 ， 己 使 用 JSON.parse 解析 。 


ok CHIRIE): 当 HTTP 响应 状态 码 在 200—299 区 间 时 该 值 为 tue， 表 示 响 应 成 功 。 


statusText 《字符 串 ): HTTP 响应 状态 文本 描述 。 


Q 

O status (数值 ): HTTP 响应 状态 码 。 
Q 

Q 


headers (KZ): 获取 HTTP 响应 头 信 息 ， 不 传 参 表 示 获 取 整 个 响应 头 ， 返 回 一 个 响应 
LWA; 传 参 表 示 获 取 对 应 的 响应 头 信息 。 


O request (TR): 请 参阅 13.1.5 节 。 


13.1.7 RESTful 调用 


RESTful 调用 方式 就 是 客户 端 通过 HTTP 动词 来 表示 增 、 删 、 改 、 查 实现 对 服务 端 数据 操 
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作 的 一 种 架构 模式 。 


vue-resource 提供 全 局 调用 Vue.resource 或 者 在 组 件 实例 上 调用 this.$resource。 这 两 种 调用 
方式 接受 相同 的 参数 : 
resource(url, [params], [actions], [options 

1. url ( 字符 串 ) 

请 求 地 址 ， 可 以 包含 占 位 符 〈 花 括号 所 包 轩 
同名 属性 的 值 替 换 ， 详 情 请 参阅 13.1.11 8. 


this.$resource('/books/{cat}', ícat: '1']) 


J 


的 内 容 即 为 占 位 符 )， 它 会 被 params 对 象 中 的 


最 终 实际 URL 为 /books/1。 

2. params ( 可 选 ， 对 象 ) 

参数 对 象 ， 可 用 来 替换 url 中 的 占 位 符 ， 多 出 来 的 属性 会 拼接 成 url 的 查询 参数 。 

3. actions ( 可 选 ， 对 象 ) 

可 以 用 来 对 已 有 的 action 进行 配置 ， 也 可 以 用 来 定义 新 的 actions AHY action 配置 如 下 : 


Resource.actions = { 


get: (method: 'GET'}, 

Save: (method: 'POST'], 
query: {method: 'GET'}, 
update: {method: 'PUT'}, 
remove: {method: 'DELETE'}, 
delete: (method: 'DELETE'} 


我 们 可 以 定义 新 的 action， 代 码 示例 如 下 : 


this.$resource( 


'/books/(cat]', 


charge: 
{ 
method: 'POST', 


params: { 
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charge: true 


上 面 我 们 定义 了 一 个 名 为 charge 的 action, "fi 


POST 方法 来 请 求 资 源 。 


iE: actions 对 象 中 的 单个 action 如 charge 对 象 可 以 包含 options 中 的 所 有 属性 ， 且 其 优先 


级 高 于 options 对 象 。 


4. options ( 可 选 ， 对 象 ) 


参阅 13.1.5 节 。 


aie 


resource 方 法 执行 后 返回 一 个 包含 了 所 有 action 方法 名 的 对 象 , 其 包含 自 定 义 的 action 方法 ， 


这 些 方法 都 返回 Promise 对 象 ， 详 情 请 参阅 13.1.10 市 


= 


请 求 数据 的 例子 。 代 码 示例 如 下 : 


var resource = this.$resource ('/books/{id}'); 


// 查询 


。 下 面 让 我 们 看 看 完整 地 使 


J resource 来 


// 第 一 个 参数 为 params 对 象 ， 优 先 级 高 于 resource 方法 的 params 参数 


resource.get({id: 1}).then(response) { 
this.Sset('item', response.item) 

} 

// 保存 

// 第 二 个 参数 为 要 发 送 的 数据 

resource.save({id: 
// 请 求 成 功 回调 


), function 


(response) { 


// 请 求 失败 回调 

}) 

resource.delete({id: 1}).then(function (response) 
// 成 功 回调 

), function (response) { 
// 失败 回调 


}) 


13.1.8 拦截 器 


可 以 全 局 进行 拦截 器 设置 ， 拦 截 器 可 以 在 请 求 发 送 前 或 响应 返回 时 做 一 些 特殊 的 处 理 


1), (item: this.item)).then(function 


(response) { 


{ 


o 
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1， 拦 截 器 的 注册 
Vue.http.interceptors.push(í 
request: function (request) { 
// 更 改 请 求 类 型 为 PoST 
request.method = 'POST' 


return request 
), 
response: function (response) { 
// 修改 返回 数据 
response.data = [{ 
custom: 'custom' 
1] 


return response 


2. 工厂 函数 注册 
Vue.http.interceptors.push(function () { 
return { 
request: function (request) { 
return request 
), 
response: function (response) { 


return response 


} 
}) 


13.1.9 Sta AJAX 


很 多 人 认为 AJAX 只 能 在 同 域 的 情况 下 发 送 成 功 ,很 早 的 时 候 , FH TUI a a 2 4 EU, AJAX 
确实 只 能 在 同 域 的 情况 下 发 送 。 但 是 目前 很 多 浏览 器 已 经 开始 文 持 XMLHttpRequest2 。 
XMLHttpRequest2 引入 了 大 量 的 新 特性 ， 例 如 跨 域 资源 请 求 《CORS)、 上 传 进度 事件 、 支 持 二 
进 制 数据 上 传 /下 载 等 。 


本 节 我 们 将 会 介绍 vue-resource 中 用 到 的 CORS 特性 ， 以 及 XMLHttpRequest2 的 替代 品 
XDomainRequest。 
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1. XMLHttpRequest2 CORS 


XMLHttpRequest2 是 第 二 代 XMLHttpRequest 技术 ， 提 交 AJAX 请 求 还 是 和 普通 的 
XMLHttpRequest 请 求 一 样 ， 只 是 增加 了 一 些 新 特性 。 


在 提交 AJAX 跨 域 请 求 时 ， 首 先 我 们 需要 知道 当前 浏览 器 是 否 文 持 XMLHttpRequest2， 判 
断 方 法 是 使 用 in 操作 符 检测 当前 XMLHttpRequest 实例 对 象 是 否 包 含 withCredentials 属性 ， 如 
果 包 含 则 支持 CORS。 代 码 示例 如 下 : 
var xhrCors = 'withCredentials' in new XMLHttpRequest () 


在 支持 CORS 的 情况 下 ， 还 需要 服务 端 启用 CORS 支持 。 


假如 我 们 想 从 http:/example.com 域 中 提交 请 求 到 http://crossdomain.com 域 ， 那 么 需要 在 
crossdomain.com 域 中 添加 如 下 响应 头 ; 
Access-Control-Allow-Origin: http://example.com 


如 果 crossdomain.com 要 允许 所 有 异域 都 可 以 AJAX 请 求 该 域 资 源 ， 则 添加 如 下 响应 头 : 


Access-Control-Allow-Origin: 大 
服务 端 开启 CORS 支持 后 ， 在 浏览 器 中 我 们 就 可 以 和 提交 普通 的 AJAX 请 求 一 样 提交 跨 域 
求 了 。 代 码 示例 如 下 : 


var xhr = new XMLHttpRequest() 


T 


a 


xhr.open('GET', 'http://www.crossdomain.com/hello.json') 
xhr.onload = function(e) { 


var data - JSON.parse(this.response) 


} 


xhr.send() 

2. XDomainRequest 

WRA IE 8、IE 9 中 支持 CORS (IE 10 及 以 后 版 本 支持 XMLHttpRequest2)， 我 们 可 以 
使 用 XdomainRequest (该 属性 目前 已 上 废弃， 不 建议 使 用 )。 如 果 vue-resource 不 文 持 
XMLHttpRequest2， 则 会 降级 使 用 此 种 方式 。 代 码 示例 如 下 : 


// 实例 化 XDomainRequest 


var xdr = new XDomainRequest() 
xdr.open("get", "http://crossdomain.com/hello.json") 


xdr.onprogress = function () { 


// 进度 回调 


210 ”Vue.js 权威 指南 


} 

xdr.ontimeout = function () { 
// 超时 回调 

} 


xdr.onerror = function () { 
// 出 错 回 调 

} 

xdr.onload = function() { 
// 成 功 回调 


//success (xdr.responseText) 
} 


setTimeout (function () { 


// 发 送 请 求 
xdr.send() 
), 0) 


it: XDomain 只 支持 GET fe POST 两 种 请 求 , 如 果 要 在 vue-resource 中 使 用 其 他 方法 请 求 ， 
请 设置 请 求 选项 对 象 的 emulateHTTP 为 true。 在 定时 器 中 调用 xhr.send() 方 法 ,是 为 了 防止 多 个 
XDomainRequest 请 求 同 时 发 送 时 部 分 请 求 丢 失 。 


13.1.10 Promise 


vue-resource 基本 HTTP 调用 和 RESTful 调用 action 方法 执行 后 都 会 返回 一 个 Promise 对 象 ， 
该 Promise 对 象 提 供 了 then. catch. finally 等 常用 方法 来 注册 回调 函数 。 代 码 示例 如 下 : 


var promise = this.$http.post( 


'http://example.com/book/create', 
// 请 求 体 中 要 发 送 给 服务 端的 数据 
{ 


Ce 


name: 'newbook' 


'headers': { 


'Content-Type': 'x-www-form-urlencoded' 


) 


promise.then(function (response) { 
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// 成 功 回调 

console.log(response.data) 
), function (response) { 

// 失败 回调 

console.log('something wrong ' ) 
} 
promise.catch(function (response) { 

// 失败 回调 

console.log('something wrong ' ) 
} 
promise.finally(function () { 

// IIT TEA AVOCA SE IE DAT COE RE 
} 


注 ， 所 有 回调 函数 的 this 都 指向 组 件 实例 。 


13.1.11 url 模板 


vue-resource 使 用 url-template 库 来 解析 url 模板 。 我 们 来 看 一 个 使 用 url-template 解析 url 
模板 的 例子 。 代 码 示例 如 下 : 


// 引入 url-template 库 


var template = require('url-template'); 
var emailUrl = template.parse('/{email}/{folder}/{id}'); 
// 返回 '/user@domain/test/42' 
emailUrl.expand ({ 
email: 'user@domain', 
folder: 'test', 
id: 42 
} 


1E vue-resource 方法 请 求 传 参 时 我 们 可 以 在 url 中 放置 花 括号 包围 的 占 位 符 ，vue-resource 
内 部 会 使 用 url-template 将 占 位 符 用 params 对 象 中 的 属性 进行 殖 换 。 代 码 示例 如 下 : 
this.$resource('/books/{cat}', {cat: '1'}) 


最 终 实 际 URL 为 /books/1。 


i£: url-template: https://github.com/bramstein/url-template。 
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13.2 vue-async-data 


vue-async-data 是 一 个 异步 加 载 数 据 状态 指示 的 插件 ， 它 本 身 并 不 支持 异步 获取 服务 端 数据 
的 功能 ， 仅 仅 指示 数据 目前 是 处 于 加 载 状 态 还 是 已 经 加 载 完毕 。 通 过 不 同 的 状态 我 们 可 以 设置 
加 载 动 画 效 果 等 。 


13.2.1 安装 


如 果 项 目 基 于 npm 包 方 式 来 开发 ， 则 可 以 使 用 npm 来 安装 vue 和 vue-async-data。 执 行 如 
下 命令 : 
$ npm i vue vue-async-data -save-dev 

然后 在 项 目 中 引入 Vue.js 和 vue-async-data, Jf HÆ Vue.js 中 注册 vue-async-data 插件 。 代 
码 示例 如 下 : 


// 引入 Vvue.js fll vue-async-data 


var Vue = require('vue') 
var VueAsyncData = require('vue-async-data') 
// 注册 vue-async-data 插件 


Vue.use (VueAsyncData) 


13.2.2 ”使 用 


在 创建 Vue 组 件 实例 时 ， 在 选项 中 增加 asyncData 方法 。 代 码 示例 如 下 : 


// 假设 为 CommonJs 环境 


var Vue = require('vue') 


var VueAsyncData = require('vue-async-data') 
// 安装 vue-async-data 插件 
Vue.use (VueAsyncData) 
// 在 创建 组 件 实例 时 ， 在 选项 中 增加 asyncData 方法 


Vue.component('example', { 


data: function { 
return { 
msg: 'not loaded yet...' 
} 
), 


asyncData: function (resolve, reject) ( 
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// 数据 加 载 成 功 时 调用 resolve (data), 告诉 vue-async-data 数据 加 载 成 功 , 此 时 $loadingAsyncData 
// 会 被 设置 为 false 
// 数据 加 载 失 败 时 调用 reject (reason) ， 告 诉 vue-async-data 数据 加 载 失败 
// 以 下 为 了 便于 举例 ， 我 们 用 setTimeout 来 模拟 异步 数据 请 求 ， 实 际 上 可 以 调用 任何 数据 请 求 插 件 ， 如 


// vue-resource 


setTimeout (function () { 


// 以 下 方法 调用 后 , vue-router 会 自动 调用 vm. Sset ('msg', 'hi'), vm.$set('S1oadingAsyncData',true) 


resolve ({ 


msg: 'hi' 


假设 上 面 的 example 组 件 对 应 的 视图 模板 如 下 : 


«div v-if="SloadingAsyncData">Loading...</div> 


«div v-if-"!$1oadingAsyncData"»Loaded. Put your real content here.</div> 


那么 ， 当 组 件 创 建 时 会 展示 Loading... 内 容 ， 当 数据 成 功 返 回 时 会 展示 Loaded. Put your real 
content here. 内 容 。 


有 时 候 我 们 需要 手动 去 服务 端 获取 最 新 数据 来 更 新 界面 ， 这 时 需要 调用 组 件 的 实例 方法 来 
重新 加 载 数 据 。 代 码 示例 如 下 : 
vm.reloadAsyncData() 

ik: 必须 调用 vm.reloadAsyncData()， 而 不 是 vm.asyncData()。 因 为 在 vue-router 内 部 实现 
时 ， 在 调用 vm.reloadAsyncData() 方 法 时 首先 会 将 vm.$loadingAsyncData 设置 为 fue， 在 数据 成 
功 返 回 时 会 设置 vm.$loadingAsyncData 为 false。 这样 模 板 就 会 根据 $loadingAsyncData 的 真 假 来 
判断 该 展示 Loading 效果 还 是 实际 内 容 。 


13.3 ”常见 问题 解析 


13.3.1 如何 发 送 JSONP 请 求 


和 先 我 们 需要 知道 JSONP 是 利用 JavaScript 可 以 跨 域 的 特性 从 服务 端 请 求 数据 的 。 也 就 是 
说 ， 在 跨 域 的 情况 下 才 有 必要 使 用 JSONP 来 发 送 请 求 。vue-resource 提供 了 三 种 调用 方式 。 
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1， 全 局 方法 
Vue.http(( 
url: 'http://example.com/books', 
// 参 数 部 分 ， 将 会 拼接 在 url 之 后 


params: { 


cat: 1 

), 

method: 'JSONP' 
)).then(function (response) { 

// vesponse.data 为 服务 端 返回 的 数据 

console.log(response.data) 
)).catch(function (response) { 

// 出 错 处 理 

console.log(response) 


} 


2， 实 例 底层 方法 
this.$http ({ 
url: 'http://example.com/books', 
// 参数 部 分 ， 将 会 拼接 在 url 之 后 
params: { 
Cabs d 
), 
method: 'JSONP' 
)).then(function (response) { 
// this 指向 当前 组 件 实例 
console.log(this) 
)).catch(function (response) { 
// 出 错 处 理 
console.log(response) 


D 
3. 实例 便 捷 方法 


this.$http.jsonp( 
'http://example.com/books', 
// 参数 部 分 ， 将 会 拼接 在 url 之 后 


cat: t 


).then(function (response) { 
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// this 指向 当前 组 件 实例 


console.log(this) 


)).catch(function (response) { 
// 出 错 处 理 
console.log(response) 


} 


13.3.2 ”如 何 修改 发 送 给 服务 端的 数据 类 型 


在 默认 情况 下 ， 对 于 PUT. POST. PATCH, DELETE 等 请 求 ， 请 求 头 中 的 Content-Type 
为 applicatiorjson， 即 ISON 类 型 。 有 时 我 们 需要 将 数据 提交 为 指定 类 型 ， 如 application/x-www- 
form-urlencoded, multipart/form-data, text/plain 等 。 下 面 我 们 以 POST 请 求 为 例 来 说 明 。 


1. 全 局 headers 配置 


Vue.http.headers.post['Content-Type'] = 'application/x-www-form-urlencoded' 


2 实例 配置 
this.$http.post( 
'http://example.com/books', 
// 成 功 回调 
function(data, status, request) { 
if (status == 200) { 
console.dir (data) 
} 
), 
{ 
// 配置 请 求 头 
headers: { 


'Content-Type': 'multipart/form-data' 


JE: 实例 配置 的 优先 级 高 于 全 局 配置 ， 因 此 最 终 Content-Type 为 multipart/form-data ; 


13.3.3 ” 跨 域 请 求 出错 


跨 域 请 求 需要 服务 端 开启 CORS 支持 ， 详 情 请 参阅 13.1.9 节 。 
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13.3.4 $.http.post 7; ;X 3: 7j OPTIONS 方法 


在 跨 域 的 情况 下 ， 对 于 非 简单 请 求 (PUT. DELETE. Content-Type 为 application/json), i! 
览 器 会 在 真实 请 求 前 额外 发 起 一 次 类 型 为 OPTIONS 的 请 求 。 只 有 服务 器 正确 响应 了 OPTIONS 
求 后 ， 浏 览 嚣 才 会 发 起 真实 请 求 。 


a 


Ab, 为 了 在 跨 域 的 情况 下 使 用 POST 提交 Content-Type 为 application/json 的 数据 或 PUT. 
DELETE 等 非 简 单 请 求 ， 首 先 服 务 端 需要 开启 CORS 文 持 ， 详 情 请 参阅 13.1.9 T. 


同时 需要 设置 如 下 响应 头 : 


Access-Control-Allow-Methods: POST, GET, PUT, DELETE, OPTIONS 


件 
后 


E] AngularJS 一 样 , Vuejs 也 很 适合 用 来 做 大 型 单 页 应 
但 是 官方 以 插件 Cvue-router) 的 形式 提供 了 对 路 
惰性 载 入 、 视 图 切换 动画 、 具 名 路 径 等 特性 。 以 下 内 容 讲 解 都 是 基于 vue-router 0.7.13 版 本 ， 


看 就 不 加 版 本 号 了 。 


14.1 如 何 安装 


vue-router 提供 了 npm、bower、 手 动 编译 等 安装 方式 ， 可 以 根据 业务 需要 选择 其 中 一 种 方 
式 进行 安装 。 这 三 种 安装 方式 的 安装 方法 及 适合 场景 如 下 : 


J. Vuejs 本 身 并 没有 提供 路 由 机 制 ， 
的 支持 。vue-router 0.7.13 HFRS ZA 


1. npm 
当 业 务 代 码 使 用 Webpack 等 支持 CommonJS 规范 的 模块 化 打包 器 来 构建 时 , 可 以 使 用 npm 


$ npm install vue-ruoter 


CVue.js 用 此 方法 来 注册 插件 ) 注册 到 Vue 对 象 上 , TE vue-router YY SEE 
否 存在 ， 如 果 存 在 则 会 自动 调用 Vue.use(0) 方 法 ， 否 则 需要 使 用 者 手动 调用 
来 确保 路 由 插件 注册 到 Vue Po Æ Webpack 等 支持 CommonJS 规范 的 环境 : 
暴露 到 全 局 window 对 象 中 ， 而 是 会 通过 module.exports 形式 输 昌 

var Vue = require('vue') 

var VueRouter = require ('vue-router') 


天 为 vue-router 是 Vue.js 的 一 个 插件 ， 所 以 vue-router 需要 使 用 Vue.use(PluginContructor) 
| window. Vue 对 象 是 


Vue.use(VueRouter) 


, Vue 对 象 并 不 会 


// 安装 vue-router 


Vue.use (VueRouter) 


HH， 因此 需要 使 用 者 手动 注册 。 
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2. bower 

当 业 务 代 码 使 用 bower 来 管理 时 ， 可 以 使 
该 目录 为 js/vendor。 


$ bower install vue-router 


1E HTML 中 ， 在 vue X 


«1-- 引入 vue --> 


之 后 引入 vue-router: 


<script src="js/vendor/vue.js"></script> 
<!-- S|X vue-router --> 


<script src="js/vendor/vue-router.js"></script> 


3. 手动 编译 


| bower 安装 到 指定 目 


录 。 为 了 便于 举例 ， 假 定 


当 想 尝试 一 些 Vue 中 并 未 发 布 的 新 特性 时 ， 可 以 直接 clone 源码 ， 手 动 构建 来 实现 。 由 于 


i 


在 正式 发 布 之 前 ， 有 些 特性 可 能 会 被 移 除 ， 所 以 不 建议 在 生产 环境 中 使 用 手动 编译 方式 安装 。 
$ git clone https://github.com/vuejs/vue-router.git 
$ cd vue-router 
$ npm install 
$ npm run build 
14.2 ”基本 使 用 
为 了 快速 入 门 ， 我 们 先 来 看 一 个 基于 Webpack 构建 的 简单 示例 。 代 码 示例 如 下 : 
<div id="app"> 
<hl>Hello App!</h1> 
<p> 
«1-- 使 用 指令 v-link 进行 导航 --> 
«a v-link-"( path: '/foo' }">Go to Foo</a> 
«a v-link-"( path: '/bar' }">Go to Bar</a> 
</p> 
<!-- 路 由 外 链 --> 


<router-view></router-view> 


</div> 


// 引入 Vue.js 


require('vue'); 


var Vue 


// 引入 vue-router 


var VueRouter require ('vue-router'); 
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// 定义 各 路 由 组 件 


var Foo = Vue.extend({ 


template: '«p»This is foo!«/p»' 
} 
var Bar = Vue.extend(í 

template: '<p>This is bar!</p>' 
} 
// 路 由 器 需要 一 个 根 组 件 

// 出 于 演示 的 目的 ， 这 里 使 用 一 个 空 的 组 件 ， 直 接 使 用 HTML 作为 应 用 的 模板 
var App = Vue.extend({}) 
// 创建 一 个 路 由 器 实例 

// 创建 实例 时 可 以 传 入 配置 参数 进行 定制 。 为 保持 简单 ， 这 里 使 用 默认 配置 
var router = new VueRouter() 

// 定义 路 由 规则 
// 每 条 路 由 规则 应 该 映射 到 一 个 组 件 。 这 里 的 “组 件 ” 可 以 是 一 个 使 用 Vue .extend 
// 创建 的 组 件 构造 函数 ， 也 可 以 是 一 个 组 件 选项 对 象 

// 稍 后 我 们 会 讲解 符 套 路 
router.map ({ 


V £oot*s 4 


uu 


component: Foo 
}, 
'/bar': d 
component: Bar 
} 
} 
// 现在 我 们 可 以 启动 应 用 了 
// 路 由 器 会 创建 一 个 App 实例 ， 并 且 挂 载 到 选择 符 #app 匹配 的 元 素 上 
router.start (App, 'fapp') 


143 ”视图 部 分 


视图 部 分 用 来 给 用 户 提 供 导航 以 及 导航 结果 展示 区 域 。 


14.3.1  v-link 


在 原生 HTML 中 ， 我 们 用 <a> 标 签 的 href 属性 来 导航 。 在 vue-router 应 用 中 ,我 们 还 是 使 用 
《a> 标 签 ， 不 同 的 是 ， 我 们 使 用 v-link 属性 而 不 是 href 属性 。 代 码 示 例如 下 : 


«a v-link-"( path: '/join/DDFE' }">Join DDFE</a> 


A 
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当 用 户 在 页 面 上 点 击 Join DDFE Hj, vue-router 会 在 路 由 映射 中 匹配 path 为 /join/DDFE 的 


路 由 规则 ， 如 果 成 功 匹 配 到 ， 则 会 将 对 应 路 由 组 件 的 模板 内 容 演 染 到 router-view 区 域 中 。 


v-link 是 一 个 Vue.js 指令 , 它 的 值 是 一 个 JavaScript 表达 式 , 可 以 接受 一 个 表示 path 的 字符 
MA 


作对 应 组 件 的 数据 属性 来 解析 。 代 码 示例 如 下 : 


= 


<!-- 字面 量 路 径 ， 表 示 path. VER: 需要 用 单 引 号 把 字符 串 内 容 括 起 来 --> 


«a v-link="'/home'">Home</a> 


<!-- 值 为 对 应 组 件 的 数据 属性 ， 效 果 同 上 --> 
Vue.component('app', { 
data: { 
homeLinkMap: { 
path: '/home' 
} 
} 
} 


<a v-link="homeLinkMap">Home</a> 


«1-- 值 是 一 个 包含 path 属性 的 对 象 ， 效 果 同 上 --> 

«a v-link-"( path: '/home' }">Home</a> 

<!-- 值 是 一 个 包含 name 属性 的 对 象 --> 

<a v-link-"( name: 'order', params: { status: 0}}">order</a> 


7 


“4 v-link 解析 后 的 值 是 对 象 时 ， 该 对 象 可 以 有 以 下 属性 。 
1. params ( 对 象 ) 

含 路 由 中 的 动态 片段 和 全 匹配 片段 的 键 值 对 。 动 态 片 段 和 全 匹配 片段 请 参 
2. query ( 对 象 ) 
包含 路 由 中 添加 到 路 径 path 后 的 键 值 对 。 代 码 示例 如 下 : 


«a v-link-"( path: '/home', query: {isAuthed: true) }">Home</a> 


当 该 path 被 匹配 时 ， 地 址 栏 URL 为 : /home?isAuthed-true. 


3. replace ( 布尔 值 ) 
默认 值 为 false。 当 该 值 为 true 时 ， 此 次 导航 不 会 产生 历史 记录 。 


串 或 者 包含 name 或 path 属性 的 对 象 。 如 果 属 性 值 既 不 是 字符 串 也 不 是 对 象 字 面 量 ， 则 会 被 当 


阅 14.6 节 。 
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4. append ( 布尔 值 ) 


默认 值 为 false。 当 该 值 为 true 时， 如 果 此 次 导航 的 目的 path 为 相对 路 径 ， 则 实际 URL 4 
的 路 径 是 当前 path 后 拼接 目的 path。 假 设 当前 path 为 /a， 代 码 示 例如 下 ; 
«1-- 不 加 append 属性 〈 默 认 值 为 false)， 目 的 URIL 路 径 为 /b --» 


0 


«a v-link="{ path: 'b' }">b</a> 
«!-- append Wtrue, HI URL 路 径 为 /a/b --» 
«a v-link-"( path: 'b', append: true}"> /a/b </a> 


5. activeClass ( 字符 串 ) 


默认 值 为 v-link-active， 指 带 有 v-link 指令 的 a 元 素 处 于 激活 状态 时 的 class 名 称 。 该 值 也 
可 以 在 创建 路 由 器 实例 时 通过 选项 的 linkActiveClass 属性 来 进行 全 局 设置 。 


iE: 在 判断 当前 v-link 指令 所 在 元 素 是 否 处 于 激活 状态 时 默认 使 用 的 是 包含 匹配 。 也 就 是 
说 ， 当 前 实际 匹配 的 路 由 path 中 完全 包含 v-link 所 指 path 时 该 元 素 处 于 激活 状态 。 注 意 是 实际 
匹配 路 由 中 的 path, 而 不 是 浏览 器 地 址 栏 hash 中 的 path 部 分 , 强调 这 个 是 因为 当 PM 
别名 时 ， 地 址 栏 的 path 和 实际 路 由 的 path 并 不 一 致 。 我 们 也 可 以 通过 exacttrue KAERA X 
v-link 中 的 path 和 实际 路 由 的 path 完全 相等 时 才 算 匹配 。 代 码 示 例如 下 : 


«a v-link="{path: '/exact', exact: true}">exact active</a> 


ik: 使 用 v-link 而 不 是 href 来 设置 URL， 原 因 如 下 。 


Q v-link 是 一 个 Vuejs 指令 ， 它 会 根据 它 的 值 来 设置 href 的 值 。 


O 在 hash 模式 和 HTML5 history 模式 下 ，vue-router 会 统一 行为 ， 这 样 在 改变 模式 时 不 需 
要 做 任何 改变 。 


O 在 HIML5 history 模式 下 ，v-link 指令 会 监听 点 击 事件 ， 防 止 浏览 器 重新 加 载 页 面 。 


O 72 HTMLS history 模式 下 ， 如 果 使 用 root 选项 ， 不 需要 在 v-link 的 path 中 包含 root 路 


4 
径 。 


O 在 Vuejs 1.0 绑 定语 法 中 ， 不 支持 Mustache 插值 标签 ， 可 以 使 用 常规 的 JavaScript 表达 
ARË, Pih v-link = "user/' + user.name". 
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14.3.2 router—view 


mL 
n 


H 


| router-view 来 泻 染 匹配 的 组 


视图 部 分 用 来 展示 匹配 路 由 的 模板 内 容 ， 在 vue-router 中 人 
fF. router-view 是 一 个 Vue 组 件 ， 它 具有 以 下 一 些 特性 。 


O 通过 props 传递 数据 。 


O XF? v-transition 和 transition-mode， 代 码 示例 如 下 : 


<!-- 可 以 使 用 transition 指令 在 路 由 切换 时 提供 过 渡 效 果 --> 


<router-view transition-"demo" transition-mode="out-in"></router-view> 


O 支持 v-ref， 被 演 染 的 组 件 会 注册 到 父 级 组 件 的 this.$ 对 象 中 。 


O 支持 slot，router-view 中 的 HTML 内 容 会 被 插入 到 相应 路 由 组 件 模 板 的 slot 


14.4 ”路 由 实例 


在 开始 使 用 vue-router 开发 路 由 应 用 时 ， 首 先 我 们 需要 实例 化 vue-router。 代 码 示例 如 下 : 


var VueRouter = require('vue-router') 


var router = new VueRouter (vueRouterConfig) 

实例 化 VueRouter 时 可 以 传 入 一 个 可 选 的 vueRouterConfig 路 由 选项 对 象 来 自 定 义 路 
行为 。 返 回 router 路 由 器 实例 ，router 实例 暴露 了 一 些 实例 属性 和 实例 方法 , 我 们 可 以 用 来 控制 
整个 路 由 应 用 。 接 下 来 介绍 路 由 选项 对 象 和 路 由 器 实例 属性 、 方 法 。 

1， 路 由 选项 

创建 路 由 器 实例 时 ， 可 以 传 入 路 由 选项 来 自 定 义 路 由 器 行为 。 


t LH 
; NE 
rm 
cr 


可 选 参数 如 下 : 


(1) hashbang《〈 布 尔 值 ) 


默认 值 为 true。 当 该 值 为 tue 时 ， 表 示 [ 匹 配 的 路 由 在 浏览 器 地 址 栏 中 以 hash 模式 显示 。 例 
如 : 假设 当前 浏览 器 地 址 栏 中 的 地 址 为 http://example.com/path?query, 当 用 户 点 击 home 链接 时 ， 
浏览 器 地 址 栏 中 的 地 址 会 显示 为 http://example.com/path?query#!/home。 


«a v-link="{path: '/ddfe'}">Join DDFE</a> 
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(2) history 〈 布 尔 值 ) 


默认 值 为 false。 当 该 值 为 true 时 ， 会 以 HIMLS history API 进行 导航 。 当 history 值 为 true 
时 ， 需 要 注意 以 下 问题 : 


O 假如 当前 页 面 地 址 为 http://example.com/home， 而 在 路 由 配置 中 配置 了 /home/welcome 
路 径 ， 那 么 当 用 户 直接 访问 http://example.com/home/welcome 路 径 时 ， 服 务 器 端 应 确保 
返回 http://example.com/home 页 面 ， 而 不 是 http://example.com/home/welcome 页 面 ; #7 

则 有 可 能 因为 /home/welcome 页 面 不 存在 而 返回 404 错误 。 


O 
| 


当 history 值 为 true 时， 不论 hashbang 值 是 否 为 tue， 总 会 以 history 模式 进行 导航 。 


O “history 值 为 tue， 而 浏览 器 并 不 支持 HTMLS history API 时 ，vue-router 会 自动 降级 
为 hashbang 模式 。 


(3) saveScrollPosition 〈 布 尔 值 ) 


UEN false, BRE history 值 为 true 时 生效 。 当 该 值 设 置 为 true 时 , 在 点 击 浏览 器 后 
退 按钮 时 页 面 会 定位 到 上 一 次 该 路 由 对 应 视图 所 在 位 置 。 


(4) transitionOnLoad 〈 布 尔 值 ) 


默认 值 为 false。 当 该 值 为 true 时 ， 在 页 
认为 直接 泻 染 。 


=i 


第 一 次 加 载 时 router-view 会 有 路 由 切换 动画 ， 默 


(5) suppressTransitionError (布尔 值 ) 


默认 值 为 人 alse。 当 该 值 为 tue 时 ， 在 组 件 路 由 切换 钩子 中 产生 的 异常 不 会 被 抛 出 。 


(6) linkActiveClass 〈 字 符 串 ) 


默认 值 为 v-link-active， 表 示 v-link 所 在 元 素 处 于 激活 状态 时 vue-router 加 在 该 元 素 上 的 


类 名 。 


(7) root (AFB) 


REN null, ZARE history 值 为 true 时 生效 。 定 义 路 由 根 路 径 ， 所 有 路 径 被 匹配 时 ， 
浏览 器 地 址 栏 URL 会 显示 为 根 路 径 + 匹 配 路 径 。 
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2， 路 由 器 实例 属性 


router Sz flag I Wi Tk: 


CD app GRAKHI) 


J routerstart(App,#app) 时 传 入 的 组 件 构造 器 App 创建 得 到 。 


— 


vue-router 应 用 的 根 Vue 实例 , 由 调 


(2) mode (#442) 


可 能 值 有 html5、hash、abstract。 


O html5: 当 创 建 router 实例 时 ， 所 传 配置 对 象 history 值 为 tue， 并 且 浏 览 器 支持 HTML5 
history API 时 。 


O hash: HEJ router 实例 时 ， 所 传 配置 对 象 hash 值 为 tue， 或 者 history 值 为 tue， 但 浏 
览 器 不 支持 HTMLS history API 时 。 


O abstract: 当 宿 主 环境 中 没有 window 对 象 〈 例 如 非 浏 览 器 环境 ) 时 , 会 自动 退化 为 此 模式 。 
3， 路 由 器 实例 方法 


router 实例 对 外 暴露 了 很 多 方法 ， 用 来 提供 启动 、 路 由 映射 、 重 定向 、 路 由 切换 全 局 钩子 
等 功能 。 具 体 的 方法 名 及 实现 功能 如 下 。 


C12 start(App,el) 
启动 路 由 应 用 。 该 方法 接受 两 个 参数 : 
O ”App 函数 或 对 象 ) 


App 可 以 是 一 个 Vue 组 件 构 造 器 或 者 组 件 选项 对 象 ， 当 为 组 件 选项 对 象 时 ， 在 vue-router 
内 部 会 调用 Vue.extend 来 创建 App 构造 器 。 


O el CE RIR DOM 元 素 ) 

el 可 以 是 一 个 CSS 选择 器 或 者 DOM 元 素 ， 用 来 挂 载 路 由 应 用 的 根 组 件 。 
(2) On(path,config) 

添加 顶级 路 由 配置 。 该 方法 接受 两 个 参数 : 

O path CFE) 


要 匹配 的 路 径 ， 请 参阅 “路 由 匹配 ”部 分 。 


地 
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O config (对象) 


路 由 配置 对 象 ， 请 参阅 “路 由 配置 对 象 ”部 分 。 


(3) Map(routerMap) 


批量 定义 路 由 映射 规则 ， 内 部 调用 router.on 方法 实现 。 该 方法 接受 一 个 参数 : 


O routerMap (对 象 ) 


参数 routerMap 为 对 象 ， 键 为 路 径 ， 值 为 路 由 配置 对 象 。 在 vue-router 内 部 会 对 routerMap 
对 象 中 的 每 个 键 值 对 调用 routeron(0) 方 法 来 进行 路 由 映射 。 路 径 定义 请 参阅 “路 由 匹配 ”部 分 ， 
路 由 配置 对 象 请 参阅 “路 由 配置 对 象 ” 部 分 。 


(4) go(path) 


导航 到 指定 path 的 路 由 。 该 方法 接受 一 个 参数 : 


O path (字符 串 或 对 象 ) 


当 path 为 字符 串 时 ， 会 当 作 普通 路 径 来 解析 。 如 果 路 径 是 相对 路 径 〈 不 以 “/” 开 头 )， 则 
会 以 相对 于 当前 路 径 的 方式 进行 解析 。 


当 path 为 对 象 时 ， 对 象 中 只 包含 path 属性 : 
(path: '/a/b] 
或 者 
{ 
name: 'order', 
params: (id: 1], 


query: {fieldName: 'address')] 
} 


包含 name 的 路 径 及 具名 路 径 ， 可 参阅 “具名 路 径 ”部 分 。 


当 path 为 对 象 时 ， 两 种 格式 都 支持 可 选 replace 和 append 属性 : 


> replace， 布 尔 类 型 ， 默 认 值 为 false。 当 该 值 为 true 时 ， 跳 转 不 产生 新 的 历史 记录 。 


> Append， 布 尔 类 型 ， 默 认 值 为 false. MEN true 时 ， 假 如 要 跳 转 到 的 路 径 是 相对 路 
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径 ， 则 实际 路 径 是 当前 路 径 拼接 要 跳 转 到 的 路 径 。 假 设 当 前 路 径 为 /a， 目 的 路 径 为 b， 
当 append 值 为 false 时 ， 则 实际 跳 转 后 路 径 为 /b; J true 时 ， 则 实际 跳 转 后 路 径 为 /a/b。 


(5) replace(path) 


和 router.go(path) 类 似 ， 但 不 会 创建 新 的 历史 记录 。 其 参数 与 replace.go(path) 的 参数 相同 。 


(6) redirect(redirectMap) 


定义 全 局 重 定向 规则 。 如 果 要 访问 的 路 径 匹 配 重 定向 规则 ， 则 路 径 会 被 重 定向 到 指定 的 路 
径 ， 以 重 定 癌 后 的 路 径 在 浏览 器 中 生成 历史 记录 ， 原 本 访问 的 路 径 不 会 生成 历史 记录 。 该 方法 
接受 一 个 参数 : 


O redirectMap 〈 对 象 ) 


该 参数 格式 为 {fromPath: toPath}， 即 当前 访问 的 路 径 到 实际 路 径 的 映射 关系 。fromPath 和 
toPath 请 参阅 “路 由 匹配 ”部 分 。 


(7) Alias(aliasMap) 


配置 别名 规则 。 和 重 定向 不 同 的 是 ， 重 定向 的 地 址 栏 显 示 的 是 toPath ， 实 际 匹配 的 也 是 
toPath; 而 别名 实际 地 址 栏 显示 的 是 fomPath， 而 路 由 实际 匹配 的 是 toPath。 该 方法 接受 一 个 参数 : 


> aliasMap (XTZ) 


该 参数 格式 为 {fromPath: toPath}, fromPath 和 toPath 请 参阅 “路 由 匹配 ” 音 


> 


o 


(8) BeforeEach(hookFunction) 


VOTE HI A RUE ERECTAE « "REIR P HURA Fee n m cH. LAC T AL 
OBR EET, AXE n] EMT 2849 Jail fut). AP MK reject 时 ， 整 个 路 由 切换 
将 取消 ， 页 面 将 保持 原来 的 状态 。 


我 们 可 以 用 该 方法 来 注册 多 个 钧 子 函 数 ， 这 些 钩 子 会 按照 注册 的 顺序 调用 。 但 是 ， 需 要 注 
意 的 是 ， 后 一 个 钩子 只 有 在 前 一 个 钧 子 被 resolve 之 后 才 会 调用 。 


O hookFunction (ŽO 


钩子 函数 , 它 接受 一 个 transition 对 象 作 为 参数 。 关 于 transition 对 象 请 参阅 “transition 对 象 ” 


部 分 。 
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(9) router.afterEach(hookFunction) 


该 方法 用 来 全 局 注册 后 置 钓 子 函 数 ， 该 钩子 会 在 每 次 canDeactivate 和 canActivate Hk 
resolve 之 后 执行 ， 并 不 能 保证 所 有 的 activate 钩子 被 resolve。 


我 们 可 以 用 该 方法 注册 多 个 全 局 后 置 钩子 ， 这 些 钧 子 会 按照 注册 顺序 调用 。 但 和 全 局 前 置 
钩子 不 同 的 是 ， 后 一 个 钧 子 并 不 会 等 前 一 个 钩子 执行 完 才 执行 ， 它 们 是 并 行 执行 的 。 


O hookFunction (ŽO 


该 函数 接受 一 个 transition 对 象 作为 参数 ， 但 只 能 从 该 对 象 访问 from 和 to 属性 ， 这 两 个 
性 分 别 是 当前 和 将 要 切换 到 的 路 由 对 象 。 在 后 置 钩子 中 ，transition 对 象 没 有 提供 任何 控制 路 日 
流程 的 方法 。 关 于 transition 对 象 请 参阅 “transition 对 象 ” 部 分 。 


al 


au 


14.5 ”组 件 路 由 配置 


在 vue-router 应 用 中 ， 每 一 个 路 由 对 应 一 个 组 件 ， 在 路 由 组 件 中 我 们 可 以 配置 route 字段 来 
实现 在 路 由 切换 的 各 个 阶段 对 组 件 进行 更 好 的 控制 : 


var Message = Vue.extend({ 


route: { 
canActivate: function (transition) { 


transition.next() 


以 上 示例 中 ，route 对 象 中 的 canActivate 方法 用 来 在 组 件 即 将 切入 之 前 判断 是 否 可 以 激活 ， 
只 有 可 以 激活 才 会 成 功 切入 。 在 route 对 象 中 还 可 以 配置 其 他 阶段 的 钧 子 方法 ， 以 便 更 好 地 控 表 
切换 流程 。 


= 


14.5.1 路 由 切换 的 各 个 阶段 


vue-router 将 路 由 切换 分 为 三 个 阶段 。 为 了 更 好 地 理解 各 个 阶段 完成 的 工作 ， 我 们 先 假定 当 
前 匹配 的 路 径 为 /a/b/ce， 此 路 径 对 应 三 个 髓 套 的 router-view， 如 图 14-1 所 示 。 


如 图 14-2 所 示 ， 当 用 户 接 下 来 要 访问 的 路 径 是 a/d/e 时 ， 我 们 需要 从 a/b/c 路 径 对 应 的 组 件 
树 切换 到 a/d/e 对 应 的 组 件 树 。 
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Path: a/b/c 


E D 
C) c» © 
Ce X Xx 


图 14-1 ”路径 ab/c 对 应 的 侍 套 组 件 树 图 14-2”a/b/c 和 a/d/e 对 应 的 组 件 树 


Path: a/b/c Path: a/d/e 


在 以 上 路 由 切换 过 程 中 ， 我 们 需要 做 以 下 工作 : 


O 可 以 重用 组 件 A， 因 为 重新 泻 染 后 ， 组 件 A 依然 保持 不 变 。 


要 停 用 并 移 除 组 件 B 和 C。 


需 
启用 并 激活 组 件 D All E. 


Q 
Q 
Q 


在 执行 步骤 2 和 3 之 前 ， 需 要 确保 切换 效果 有 效 ， 也 就 是 确保 切换 中 涉及 的 所 有 组 件 都 
能 按照 押 期 望 的 那样 被 停 用 /激活 。 


使 用 vue-router， 我 们 可 以 通过 实现 切换 钩子 函数 来 控制 这 些 步骤 。 在 讲解 如 何 做 的 细 贡 之 
前 ， 我 们 先 来 了 解 一 下 大 局 。 


路 由 切换 的 各 个 阶段 如 下 : 


如 图 14-3 所 示 ， 检 查 当 前 视图 结构 中 是 否 存 | C) C) : M cu 


在 可 以 重用 的 组 件 。 这 是 通过 对 比 两 棵 新 的 组 件 一 LT oo 


树 ， 找 出 共用 的 组 件 ， 然 后 检查 它们 的 可 重用 性 C) 
(通过 canReuse 选项 ) 来 判断 的 。 在 默认 情况 下 ， . 
所 有 组 件 都 是 可 重用 的 ， 除 非 是 定制 过 的 。 C C 
2， 验 证 阶段 
如 图 14-4 所 示 , 检查 当前 组 件 是 否 能 够 停 用 ， 图 14-3 “可 重用 阶段 


以 及 新 组 件 是 否 可 以 被 激活 。 这 是 通过 调用 路 由 配置 阶段 的 canDeactivate 和 canActivate £J-T K 
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数 来 判断 的 。 


it: canDeactivate 按照 从 下 至 上 的 冒 泡 顺序 检查 ， 而 canActivate 则 是 从 上 至 下 。 


p? 


3. canDeactivate 


2. canDeactivate Y 5. canActivate 


NO. 4. canActivate 


图 14-4 ”验证 阶段 


任何 一 个 钧 子 函数 都 可 以 终止 界面 切换 。 如 果 在 验证 阶段 终止 了 界面 切换 ， 路 由 器 会 保持 
当前 应 用 状态 ， 恢 复 到 前 一 个 路 径 。 
3. 激活 阶段 


如 图 14-5 所 示 , 一 旦 所 有 的 验证 钧 子 函 数 都 被 调用 而 且 没 有 终止 切换 ,切换 就 可 以 认定 是 
合法 的 ， 路 由 器 则 开始 禁用 当前 组 件 并 启用 新 组 件 。 


7. deactivate | B ] ww" No 8. activate -» data 


v 


6. deactivate 9. activate -» data 


414-5 ”激活 阶段 


此 阶段 对 应 钧 子 函数 的 调用 顺序 和 验证 阶段 相同 ， 其 目的 是 在 组 件 切换 真正 执行 之 前 提供 
一 个 进行 清理 和 准备 的 机 会 。 界 面 的 更 新 会 等 到 所 有 受 影 响 组 件 的 deactivate 和 activate 钩子 函 
数 执行 之 后 才 进 行 。 
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data ZAT RARE activate Za, RE de s B ZH TE RT UAR 
Be PRS AA PER EE MT PB A 


fo 
[TD 


用 时 也 会 被 调用 。 


14.5.2 KNERT waa 


在 路 由 切换 的 各 个 阶段 ，vue-router AIET AMAT RAG AET RAR: 


O canReuse 


O canActivate 


O activate 


O data 


O canDeactivate 


O deactivate 


可 以 在 实例 化 组 件 时 在 route 选项 中 实现 这 些 钩 子 函 数 ， 代 码 示 例如 下 : 


var Message = Vue.extend({ 
route: { 
canActivate: function (transition) { 
transition.next () 


} 


每 个 钩子 函数 都 会 接受 一 个 transition 对 象 作为 参数 ， 详 见 14.7 节 。 
1. 钩子 函数 异步 resolve 


通常 我 们 会 在 钧 子 函数 中 进行 一 些 异步 操作 ， 在 异步 操作 被 resolve 之 前 , 切换 会 处 于 暂停 
Js. FIL AŽ resolve 遵循 以 下 规则 : 


O 如 果 钩 子 函 数 返回 一 个 Promise 对 象 ， 则 钧 子 函数 何 时 resolve 取决 于 该 Promise 何 时 
resolve。 代 码 示例 如 下 : 


route { 


activate: function () { 
// 返回 Promise 对 象 
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return new Promise(function (resolve, reject) 


if (Math.random() > 0. 


// resolved 

resolve('resolved') 
} else T 

// rejected 


reject ('rejected') 


O 〇 ”如 果 钧 子 函数 既 不 返 
代码 示例 如 下 : 


route: { 


5) { 


{ 


回 Promise WR, WRATHER, DUE LEA eh BOK HK le] resolve. 


activate: function (/* 没有 参数 */) { 
// 如 果 不 返 回 Promise 对 象 ， 则 同步 resolve 


O WRAT AA [Al 


Promise 对 象 ， 但 是 有 一 


个 参数 (transition), WF wes Fl 


transition.next(). transition.abort() 2X, transition.redirect() 之 一 被 调用 时 才 resolve. {Midas 


例如 下 : 


route: { 


activate: function (transition) { 


// 1 秒 后 resolve 


setTimeout (transition.next, 1000) 


QO i 仁 证 类 钩子 函数 如 canActivate. canDeactivate 以 及 全 局 beforeEach HT Až, 如果 
返回 值 是 一 个 布尔 值 (Boolean )， 也 会 使 得 钧 子 函 数 被 同步 resolve. 


2， 在 钩子 函数 中 返回 Promise WK 


O Ug TA ER 


transition.next. 


O 如 果 Promise 在 验证 


一 个 Promise 对 象 时 , 系统 会 在 该 Promise 被 resolve 之 后 自动 调用 


阶段 被 reject， 系 统 会 调 | 


j] transition.abort. 
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O 如 果 Promise 在 激活 阶段 被 reject， 系 统 会 调用 transition.next. 


O 对 于 验证 类 钩子 函数 (canActivate 和 canDeactivate )， 如 果 Promise 被 resolve 之 后 的 值 
是 假 值 (falsy value)， 系 统 会 中 断 此 次 切换 。 


O 如 果 一 个 被 reject 的 Promise 抛 出 了 未 捕获 的 异常 ， 这 个 异常 
创建 路 由 器 时 启用 了 参数 suppressTransitionError。 


3. 钩子 函 数 合 并 
和 组 件 本 身 的 生命 周期 钩子 函数 一 样 ， 以 下 路 由 生命 周期 钩子 函数 : 


yp 


继续 向 上 抛 出 ， 除 非 在 


O data 


O activate 


O deactivate 


也 会 在 合并 选项 时 〔( 扩 展 类 或 使 用 mixinsO 被 合并 。 举 例 来 说 ， 如 果 组 件 本 身 定 义 了 一 个 路 
由 data 钩子 函数 ， 而 这 个 组 件 所 调用 的 mixin 也 定义 了 一 个 路 由 data FF eA, Wc Py Me 
函数 都 会 被 调用 ， 并 且 各 自 返 回 的 数据 将 会 被 最 终 合 并 到 一 起 。 


需要 注意 的 是 ， 验 证 类 钩子 函数 如 canActivate、canDeactivate 和 canReuse 在 合并 选项 时 会 
直接 被 新 值 覆 兰 。 
4. 钩子 函数 介绍 


(1) canReuse 


该 钩子 函数 用 来 判断 组 件 是 否 可 以 重用 。 车 可 以 重用 ， 则 不 会 创建 新 的 组 件 实例 ， 只 会 调 
用 data 钩子 函数 来 更 新 数据 ， 而 不 会 调用 其 他 钩子 函数 ; 若 不 可 重用 ,， 则 会 创建 新 的 组 件 实例 ， 
此 时 各 个 钩子 函数 都 会 被 调用 。 


canReuse 可 以 是 一 个 布尔 值 或 者 同步 返回 布尔 值 的 函数 ， 默 认 值 为 fue。 当 其 为 函数 时 ， 
可 接受 一 个 参数 : 


O transition (可 选 ， 对 象 ) 


在 canReuse 钩子 函数 中 只 能 访问 transition.to 和 transition.from, FEW, “transition 对 象 ” 部 分 。 


必须 返回 布尔 类 型 ， 其 他 等 效 假 值 会 按 false XEF. 
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注意 ; 实际 上 判断 组 件 是 否 可 重用 不 仅仅 依赖 该 钓 子 函数 的 值 ， 当 根 路 径 不 一 样 时 ， 不 论 


canReuse 钩子 函数 是 否 可 重用 ， 


组 件 都 会 被 重新 实例 化 ， 各 个 阶段 的 钩子 函数 都 会 被 调用 。 只 


有 当前 路 径 和 目的 路 径 有 共同 的 根 路 径 时 ，canReuse AF HAA AACE A. 


(2) canActivate 


在 验证 阶段 ， 当 一 个 组 件 将 要 被 切入 时 被 调用 。 该 函数 可 以 接受 一 个 参数 : 


O transition (可 选 ， 对 象 ) 


调用 transition.next() 可 以 resolve 该 钩子 函数 ， 调 用 transition.abort0 可 以 取消 此 次 切换 。 详 


JL “transition 对 象 ” 部 分 。 


可 以 返回 Promise 对 象 ， 以 下 是 等 价 的 Promise 和 transition 操作 : 


resolve(true) -> transition.next() 


resolve(false) -> transition.abort() 


reject(reason) -> transition.abort (reason) 


或 者 返回 布尔 值 ， 以 下 是 等 价 的 布尔 值 和 transition 操作 : 


true -> transition.next() 


false -» transition.abort() 


该 钩子 函数 的 调用 顺序 是 从 上 至 下 。 子 级 组 件 视图 的 canActivate 钩子 函数 仅 在 父 级 组 件 的 


canActivate 被 断定 (resolved) 


(3) activate 


之 后 调用 。 


在 激活 阶段 ， 当 组 件 被 创建 而 且 将 要 切换 进入 时 被 调用 。 该 函数 可 以 接受 一 个 参数 : 


O transition 〈 可 选 ， 对 象 ) 


调用 transition.next() HJ DA resolve 该 钩子 函数 ， 调 用 transition.abort0 不 可 以 取消 此 次 切换 ， 


因为 在 执行 到 该 多 子 函 数 时 验 说 


F 已 经 合法 了 。 详 见 “transition 对 象 ” 部 分 。 


可 以 返回 Promise 对 象 ， 以 下 是 等 价 的 Promise 和 transition 操作 : 


resolve -> transition.next() 


reject(reason) -> transition.abort (reason) 


该 钩子 函数 用 来 控制 视图 切换 和 数据 获取 的 时 机 。 在 该 钩子 函数 被 resolve 之 后 ， 会 同时 进 
行 视 图 的 切换 和 data 钩子 函数 的 调用 。 
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该 钩子 函数 的 调用 顺序 是 从 上 至 下 。 子 级 组 件 视图 的 activate 钩子 函数 仅 在 父 级 组 件 的 
activate 被 断定 (resolved) 之 后 调用 。 

(4) data 

在 激活 阶段 ，activate 钩子 函数 被 resolve 时 调用 ， 用 于 加 载 和 设置 当前 组 件 的 数据 。 该 函 
数 可 以 接受 一 个 参数 : 

O transition (AJ, XA) 

调用 transition.next(data) 会 为 组 件 的 data 相应 属性 赋值 。 例 如 使 用 { a: 1,b: 2 }， 路 由 会 调用 


component.$set('a', 1) 以 及 component.$set('b', 2). 


可 以 返回 


resolve (data) 


reject (reason) 


data 钩子 函数 会 在 activate 被 断定 (resolved)， 以 及 界面 
一 个 名 为 $loadingRouteData 的 元 属性 ， 其 初始 值 为 tue， 在 data 钩子 函数 被 断定 后 会 被 
唤 进 来 的 组 件 展示 加 载 效 果 。 


至 


会 得 
WHEN false. XX 


属性 可 用 来 对 切 ] 


-> transition.abort (reason) 


data 和 activate 钩子 函数 的 不 同 之 处 在 于 : 


data 在 每 次 路 由 变动 


创建 时 才 会 被 调用 。 


假设 有 一 个 组 件 对 应 于 路 


时 都 会 被 


/message/2 时 ， 当 前 组 件 可 以 被 
取 和 更 新 数据 ， 所 以 在 大 前 


Ea 


activate 的 作 


是 控制 切换 


E 


} 
分 | 


i 


FIAM 


以 及 界面 切换 之 前 被 调 | 


和 ， 所 以 数据 的 


断定 (resolved) ZB, 4 


昌 件 会 处 于 “ 力 


从 用 户 体验 的 角度 来 看 一 下 


如 果 等 
用 等 至 


两 者 的 


到 获取 到 数据 之 后 再 显示 新 组 
1 获取 数据 后 再 显示 组 件 )， 应 立刻 
态 。 如 果 我 们 在 CSS 中 定义 好 相应 的 效果 ， 这 正好 可 以 月 


周 用 ， 即 使 当前 组 件 可 以 被 


I/message/:id， 当 前 用 户 所 处 的 路 径 是 /message/1。 当 
J, HTO activate 不 会 被 调用 。 但 是 我 们 需要 根据 新 和 


情况 下 ， 在 data 中 获取 数据 比 在 activate 中 更 加 合理 。 


Promise 对 象 ， 以 下 是 等 价 的 Promise 和 transition 操作 : 


-> transition.next (data) 


EH, 但 是 activate 仅 在 组 件 


切换 之 前 被 调用 。 切 换 进 来 的 组 件 


新 


用 户 浏 览 
J id 参数 


[新 组 伯 


IR” RAS. 


的 时 机 。data 钩子 函数 会 在 activate 被 断定 (resolved) 
TRF 


F 的 切入 动画 是 并 行进 行 的 ， 而 且 在 data 被 


] 户 会 感觉 在 切换 前 界面 
] 户 的 操作 ， 切 换 视图 ， 展示 新 组 件 的 “加 载 ” 状 


被 -| 


来 掩饰 数据 加 载 的 时 间 。 


RET; 相反 ( 指 不 
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这 么 说 的 话 ， 如 果 想 等 到 数据 获取 之 后 再 切换 视图 ， 则 可 以 在 组 件 定义 路 由 选项 时 ， 添 加 


waitForData: true 参数 。 代 码 示例 如 下 : 


// 调用 transition.next 
route: { 
data: function (transition) { 
setTimeout (function () { 
transition.next ({ 
message: 'data fetched!' 
} 
}, 1000) 


<!-- 在 模板 中 使 用 $loadingRouteData --» 


<div class-"view"» 


«div v-if-"$1oadingRouteData"»Loading ...«/div» 
«div v-if="!SloadingRouteData"> 
«user-profile user="{ {user}}"></user-profile> 
<user-post v-repeat="post in posts"></user-post> 
</div> 


</div> 


(5) canDeactivate 


可 以 接受 一 个 参数 : 
O transition (可 选 ， 对 象 ) 


调用 transition.next() 可 以 resolve 该 钩子 函数 ， 调 用 transition.abort0 可 以 取消 此 次 切换 。 详 


JL “transition 对 象 ” 部 分 。 


可 以 返回 Promise 对 象 ， 以 下 是 等 价 的 Promise 和 transition 操作 : 


resolve(true) -> transition.next() 


resolve(false) -> transition.abort() 


reject (reason) -> transition.abort (reason) 
或 者 返回 布尔 值 ， 以 下 是 等 价 的 布尔 值 和 transition 操作 : 


true -> transition.next() 


false -» transition.abort() 


EWURE AAAY IRSE CEL A, FR EAL a TT EEA © VATER 


tr 


V 
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AF eh 2C IR] 8] HJ LHP AE JA FR BE. HER] canDeactivate £J-T- K BUM E T 24 2H TE RJ 
canDeactivate 被 断定 (resolved) 之 后 调用 。 


(6) deactivate 


在 激活 阶段 ， 当 一 个 组 件 将 要 被 禁用 和 移 除 时 被 调用 。 该 函数 可 以 接受 一 个 参数 : 


O transition (可 选 ， 对 象 ) 


调用 transition.next() 可 以 resolve 该 钩子 函数 ， 调 用 transition.abort0 不 可 以 取消 此 次 切换 ， 
为 在 执行 到 该 钩子 函数 时 验证 已 经 合法 了 。 详 见 “transition 对 象 ” 部 分 。 


可 以 返回 Promise 对 象 ， 以 下 是 等 价 的 Promise 和 transition 操作 : 


resolve -> transition.next() 


reject (reason) -> transition.abort (reason) 


在 该 钩子 函数 被 resolve 之 后 ， 新 组 件 的 activate 钩子 函数 会 被 调用 。 


该 钩子 函数 的 调用 顺序 是 从 下 至 上 。 父 级 组 件 的 deactivate F R AUE T 2 £R TE EJ 
deactivate 被 断定 (resolved) 之 后 调用 。 


14.6 “路 由 匹配 


vue-router 做 路 径 匹 配 时 文 持 动态 片段 、 全 匹配 片段 以 及 查询 参数 〈 片 段 指 的 是 URL 中 的 
一 部 分 )。 对 于 解析 过 的 路 由 ， 这 些 信 息 都 可 以 通过 路 由 上 下 文 对 象 ( 从 现在 起 ， 我们 会 称 其 为 
路 由 对 象 ) 访问 。 在 使 用 了 vue-router 的 应 用 中 ， 路 由 对 象 会 被 注入 每 个 组 件 中 ， 赋 值 为 
this.$route， 并 且 当 路 由 切换 时 ， 路 由 对 象 会 被 更 新 。 


14.6.1 动态 片段 


动态 片段 使 用 以 冒号 开头 的 路 径 片 段 定 义 ， 例 如 在 user/:username 中 ，:username 就 是 动态 
片段 , 它 会 匹配 注入 /user/foo 或 者 /userbar 之 类 的 路 径 。 当 路 径 匹 配 一 条 含有 动态 片段 的 路 由 规 
则 时 ， 动 态 片段 的 信息 可 以 从 $route.params 中 获得 。 代 码 示例 如 下 : 


router.map ({ 


'/user/:username': { 


component: { 
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template: '<p> 用 户 名 是 {{$Sroute.params.username}}</p>' 


} 


一 条 路 径 中 可 以 包含 多 个 动态 片段 ， 每 个 片段 都 会 被 解析 成 Sroute.params 的 一 个 键 值 对 。 


14.6.2 全 匹配 片段 


动态 片段 只 能 匹配 路 径 中 的 一 部 分 , 而 全 匹配 片段 则 基本 类 似 于 它 的 贪心 版 ,例如 ，/foo/*bar 
会 匹配 任何 以 /foo/ 开 头 的 路 径 。[ 匹 配 的 部 分 也 会 被 解析 成 $route.params 的 一 个 键 值 对 。 


因为 “*” 可 以 匹配 任何 路 径 ， 所 以 我 们 可 以 用 它 来 匹配 默认 路 由 。 代 码 示 例如 下 ; 


router.map ({ 


"x": { 
component: { 
template: '<p>default view</p>' 
} 


当 所 有 路 由 都 不 匹配 时 ， 会 默认 匹配 “*” 对 应 的 路 由 。 


14.6.3 具名 路 径 


在 有 些 情况 下 ， 给 一 条 路 径 加 上 一 个 名 字 能 够 让 我 们 更 方便 地 进行 路 径 跳 转 。 我 们 可 以 按 
照 下 面 的 示例 给 一 条 路 径 加 上 名 字 : 


router.map( 


'/user/:userlId': { 
name: 'user', // 给 这 条 路 径 加 上 一 个 名 字 
component: { ... } 
} 
} 


可 以 用 v-link 链接 到 该 路 径 ， 代 码 示例 如 下 : 


«a v-link-"( name: 'user', params: { userId: 123 }}">User</a> 
同样 的 ， 也 可 以 用 routergoO 切换 到 该 路 径 ， 代 码 示例 如 下 : 
router.go({ name: 'user', params: { userId: 123 }}) 


以 上 两 种 情况 ， 路 由 最 终 都 会 切换 到 /user/123。 
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14.6.4 ”路 由 对 象 


路 由 对 象 $route 存储 了 当前 路 由 的 信息 ， 包 括 以 下 属性 ; 


字符 串 ， 等 于 当前 路 由 对 象 的 路 径 ， 会 被 解析 为 绝对 路 径 ， 如 "foo/bar'"。 


O params 一 一 WR, 包含 路 由 中 的 动态 片段 和 全 匹配 片段 的 键 值 对 ， 详 情 见 14.6.1 节 和 


O query 一 一 对 象 ， 包 含 路 由 中 查询 参数 的 键 值 对 。 例 如 ， 对 于 /foo?user=1， 会 得 到 


$route.query.user == 1 。 


Ik 


O router 


管理 当前 路 由 器 的 vue-router 实例 。 


O matched 一 一 数组 , 包含 当前 匹配 的 路 径 中 所 包含 的 所 有 片段 所 对 应 的 配置 参数 对 象 。 


符 串 ， 当 前 路 径 的 名 字 【〈 请 参阅 14.6.3 n. 


除了 内 置 属性 ， 在 用 routermap 配置 路 由 映射 规则 时 定义 的 字段 也 会 复制 到 最 终 的 路 由 对 


象 上 。 代 码 示 例如 下 : 


router.map ({ 
'/user': { 
auth: true, 


component: { 


template: '<p> 用 户 名 是 {{$Sroute.params.username}}</p>' 


} 


在 /user 被 匹配 时 ， 当 前 路 由 对 象 $route.auth 的 值 是 true。 基 于 此 ， 我 们 可 以 在 全 局 钧 子 函 


数 中 进行 身份 验证 。 


代码 示例 如 下 : 


router.beforeEach(function (transition) { 


if (transition.to.auth) { 


// 对 用 户 身份 进行 验证 .. . 
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14.7 transition WR 


每 个 钓 子 函数 都 会 接受 一 个 transition 对 象 作 为 参数 。transition 对 象 并 不 是 动画 对 象 ， 它 提 
供 了 很 多 方法 来 控制 路 由 切换 的 时 机 。 该 对 象 包含 以 下 属性 : 


O to〈 路 由 对 象 ) 表示 将 要 切换 到 的 路 由 对 象 。 关 于 路 由 对 象 请 参阅 14.6.4 Ti. 


O from《〈 路 由 对 象 ) 表示 当前 路 径 的 路 由 对 象 。 


next (220) 一 一 调用 此 函数 处 理 切换 过 程 的 下 一 步 。 


Q 
O abort (函数 ) — 调用 此 函数 来 终止 或 者 拒绝 此 次 切换 。 
Q 


redirect (KZO 一 一 取消 当前 切换 并 重 定向 到 另 一 个 路 由 。 


14.8 ”应 套路 由 


扩 套 路 由 和 和 骸 套 组 件 之 间 的 匹配 是 一 个 很 常见 的 需求 ， 使 用 vue-router 可 以 很 简单 地 实现 


假设 有 一 个 应 用 ， 代 码 示例 如 下 : 


<div id="app"> 


<router-view></router-view> 


</div> 


<router-view> 是 一 个 顶级 的 外 链 ， 它 会 泻 染 一 个 和 顶级 路 由 匹配 的 组 件 。 代 码 示 例如 下 : 
router.map ({ 

'/foo': { 
// 路 由 匹配 到 /foo 时 ， 会 泻 染 一 个 Foo 组 件 
component: Foo 

} 

}) 


同样 的 ， 在 组 件 内 部 也 可 以 包含 自己 的 外 链 ， 峰 套 的 <router-view>。 例 如 ， 我 们 在 组 件 Foo 
的 模板 中 添加 了 一 个 <router-view>， 代 码 示例 如 下 : 


var Foo = Vue.extend({ 


template: 


"<div class="foo">!' + 
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'<h2>This is Foo!«/h2»' + 
'«router-view»«/router-view»' + // <- WEINE 


'«/div»' 


K Y fi e dXX CES I MEP RYZE, AIT EE USER RUE. fU: 


router.map ({ 
'J£oo*z. s 
component: Foo, 


// 在 /foo 下 设置 一 个 子路 


subRoutes: { 
'/bar': { 
// 当 匹 配 到 /foo/bar 时 ， 会 在 Foo 的 <router-view> 内 演 染 
// 一 个 Bar 组 件 


component: Bar 
), 
"Baz 
// Baz 也 是 一 样 的 ， 不 同 之 处 是 匹配 的 路 由 会 是 /f00/baz 


component: Baz 


使 用 以 上 配置 ， 当 访问 /foo 时 ，Foo 的 外 链 中 不 会 演 染 任何 东西 ， 因 为 在 配置 中 没有 任何 
子路 由 匹配 这 个 地 址 。 或 许 我 们 想 泻 染 一 些 内 容 ， 此 时 可 以 设置 一 个 子路 由 匹配 “/” 代码 示 
例如 下 : 


router.map ({ 


'/foo': { 


component: Foo, 
// 在 /foo 下 设置 一 个 子路 
subRoutes: { 
uus 
// 当 匹 配 到 /foo 时 ， 会 在 Foo 的 <router-view> 内 泻 染 


component: Default 

), 

'/bar': { 
// 当 匹 配 到 /foo/bar 时 ， 会 在 Foo 的 <router-view>Win% 
// 一 个 Bar 组 件 
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component: Bar 
), 
"baziUs d 
// Baz 也 是 一 样 的 ， 不 同 之 处 是 匹配 的 路 由 会 是 /foo/baz 


component: Baz 


14.9 ”动态 加 载 路 由 组 件 


当 我 们 使 用 Webpack 或 者 Browserify IN, 在 基于 异步 组 件 编写 的 Vue 项 目 中 也 可 以 较为 容 
易 地 实现 惰性 加 载 组 件 。 不 再 是 之 前 所 述 的 直接 引用 一 个 组 件 ， 现 在 需要 像 下 面 这 样 通过 定义 
一 个 函数 返回 一 个 组 件 。 代 码 示 例如 下 : 


router.map ({ 


'/async': { 


component: function (resolve) { 


// MyComponent 通过 Requireds 从 服务 端 加 载 


resolve (MyComponent) 


Webpack 已 经 集成 了 代码 分 割 功能 ,我 们 可 以 使 用 AMD 风格 的 require 来 标识 代码 分 割 点 。 
代码 示例 如 下 : 
require(['./MyComponent.vue'], function (MyComponent) { 
// 执行 Mycomponent 组 件 加 载 完 后 的 逻辑 
} 


和 路 由 配合 使 用 ， 代 码 示例 如 下 : 


router.map ({ 


'/async': { 
component: function (resolve) { 


require (['./MyComponent.vue'], resolve) 
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现在 ， 只 有 当 /async 需要 被 泻 染 时 ，MyComponent.vue 组 件 才 会 自动 加 载 它 的 依赖 组 件 ， 
并 且 异 步 加 载 进 来 。 


14.10 ”实战 


在 学 习 了 vue-router 应 用 的 基本 组 成 之 后 ， 现 在 我 们 运用 所 学 到 的 知识 来 进行 实战 。 首 先 
我 们 会 看 一 个 直接 在 浏览 器 中 引用 相关 文件 的 完整 实例 ， 接 下 来 会 基于 Webpack 构建 工具 做 
个 动态 加 载 路 由 组 件 的 高 级 实例 。 


B 
Tar 


14.10.1 浏览 器 直接 引用 


为 了 便于 理解 ， 我 们 会 在 一 个 HTML 文件 中 完成 实例 分 析 。 代 码 示例 如 下 : 


<!DOCTYPE html» 


«html lang-"en"» 
<head> 
<meta charset="UTF-8"> 
<title>vue router demo</title> 
<style> 
.v-link-active { 
color: green; 
} 
</style> 
</head> 
<body> 
<div id="app"></div> 
<script src="/vue/1.0.24/vue.min.js"></script> 
<script src="/vue-router/0.7.13/vue-router.min.js"></script> 
<!-- 根 组 件 模 板 --> 
<script type="text/vue-tempalte" id="rootTemplate"> 
<div class="wrapper"> 
<div class="nav"> 
<a v-link="{path: '/home'}">Home</a> 
<a v-link="{path: '/about'}">About</a> 
</div> 
<div class="router-view"> 
<router-view></router-view> 


</div> 
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</div> 

</script> 

<script> 
// 路 由 组 件 定义 ， 路 由 组 件 可 以 是 通过 Vue extend 创建 的 构造 函数 ， 或 者 是 一 个 组 件 配置 对 象 
// 当 为 组 件 对 象 时 ，vue-router 内 部 会 自动 调用 Vue. extend 创建 构造 函数 
// 构造 函数 形式 


var Home = Vue.extend ({ 
template: 'This Is Home Page' 
} 
// 组 件 配置 对 象形 式 
var About = ( 
template: 'This Is About Page' 
} 
// RAIF, VueRouter 实例 会 用 此 根 组 件 来 启动 应 
var App = Vue.extend ({ 


template: document.querySelector('#rootTemplate') .textContent 
} 
// 实例 化 VueRouter 
var router = new VueRouter() 
// 路 由 映射 配置 


router.map(í 


'/home': ( 
component: Home 
), 
'/about': { 
component: About 
} 
} 
/* 
以 上 路 由 映射 等 价 于 通过 此 种 方式 调用 ， 实 际 上 调 
router.map 时 在 vue-router 内 部 会 对 每 个 键 值 对 
调用 router .on 方法 来 完成 路 由 规则 映射 


router.on( 


'/home', 
{ 
component: Home 
} 
} 


router.on ( 
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'/about', 
{ 
component: About 
} 
) 
Ai 


// 默认 访问 重 定向 到 /home 


router.redirect ({ 


!'/': '/home' 
} 
router.start (App, 
</script> 
</body> 
</html> 


'#app') 


14.10.2 Webpack 模块 化 开发 


M 


项 目 变 得 非常 复杂 时 ， 很 有 


必要 采用 模块 化 方式 


户 可 能 不 会 访问 到 。 


对 于 以 上 问题 ， 我 们 可 以 结合 Webpack MARIBI N 
用 户 访问 某 一 个 路 由 时 ， 才 去 服务 端 获 取 相 应 的 组 件 代 码 。 这 样 做 可 以 加 快 页 
下 面 我 们 来 看 看 具体 如 何 实现 以 上 需求 。 


时 可 以 节省 流量 。 


首先 我 们 来 看 看 


example 


录 结 


|- components 

|- about.vue 

|- home.vue 

|- not-found.vue 
app.vue 
index.html 
index.js 
router-config.js 


package.json 


webpack.config.js 


由 组 件 直接 打包 到 一 个 文件 ， 


OE 


来 开发 。 通 常 我 们 会 用 Webpack 将 各 路 
， 实 际 上 这 种 方式 会 导致 不 必要 的 代码 被 加 载 ， 因 为 有 些 模 块 用 


| 以 及 Vue 组 件 的 resolve 来 实现 只 有 


当 


HI yE 


染 速 度 ， 同 
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目录 及 文件 含义 如 下 : 
components 目录 用 来 存放 各 个 路 由 组 件 模块 。 


app.vue 是 应 用 的 根 组 件 ，vue-router 用 该 组 件 来 启动 路 由 应 | 


index.html 是 项 目的 入 口 HTML 文件 。 


o 


index.js 是 项 目的 入 口 JS 文件 


package.json 是 npm 包 信 息 文件 。 


O O O Q O O m 


router-config.js 包含 路 由 配置 规则 。 


O webpack.config.js 是 Webpack 构建 工具 的 配置 文件 。 


接 下 来 我 们 按 源码 执行 顺序 来 进行 解析 。 


o 


index.html 路 由 应 用 的 入 口 页 面 ， 定 义 了 根 组 件 挂 载 的 元 素 ， 以 及 引入 Webpack 打包 后 的 


JavaScript 文件 。 代 码 示 例如 下 : 


<!-- example/index.html --> 
<!DOCTYPE html» 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>vue-loader advanced example</title> 
</head> 
<body> 
<!-- 用 来 挂 载 根 元 素 --> 


«div id="app"></div> 


<script src="/build/build.js"></script> 
</body> 
</html> 


build. js 是 源码 打包 后 的 入 口 文件 ， 实 际 上 源码 入 口 是 index.js。 


是 整个 应 用 的 JS 入 口 。 


index.js 用 来 引入 Vue.js 和 vue-router， 实 例 化 并 启动 路 由 应 用 ， 


// example/index.js 
// 注意 : 依赖 Vue .js 0.12.10 及 以 后 版 本 
// 加 载 Vue.js 和 vue-router 


var Vue = require('vue'); 


var VueRouter = require('vue-router'); 
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var configRouter = require('./router-config'); 

// 这 里 必须 调用 Vue .use 方法 来 安装 vue-router 插件 ， 因 为 使 用 CommonJs 规范 
// Vue 对 象 不 会 暴露 为 window 对 象 的 属性 ， 因 此 vue-router 没 法 自动 安装 
Vue.use (VueRouter) 

// 创建 router 实例 


var router = new VueRouter ({ 


// 用 来 配置 路 由 映射 规则 
configRouter (router 
// 启动 主 组 件 ， 以 此 来 启动 整个 路 由 应 


var App = require('./app.vue'); 


router.start(App, '‘#app'); 


router-config.js 用 来 配置 路 由 映射 规则 、 重 定向 、 别 名 、 全 局 钩子 函数 等 ， 并 利用 Webpack 
的 代码 分 割 功能 和 vue-router 的 组 件 动态 resolve 的 功能 提供 组 件 的 动态 加 载 。 


注意 源码 中 如 require (['./components/home.vue'], resolve) 是 Webpack 提供 的 代码 分 割 语法 ， 
采用 AMD 形式 : 


require(['./asyncModule'], function (module) { 


module.doSomething () 


} 


也 就 是 说 ，Webpack 在 编译 时 过 到 以 上 AMD 语法 ， 并 不 会 直接 加 载 asyncModule 源码 ， 
而 是 在 浏览 器 中 执行 到 此 处 时 ， 才 会 去 服务 端 动态 加 载 ， 加 载 完 后 会 执行 回调 方法 ， 回 调 接受 
的 参数 是 请 求 的 module。 


在 vue-router 中 ， 假 如 组 件 定义 时 component 字段 是 一 个 方法 ， 而 不 是 对 象 或 Vue 组 件 构 
造 函数 ， 那 么 此 方法 的 参数 是 一 个 resolve 方法 。 结 合 Webpack 的 代码 分 割 功能 ， 将 resolve 作 
为 require 的 回调 ， 那 么 当 用 户 访问 一 个 本 地 没有 的 路 由 组 件 的 路 由 时 ，Webpack 首先 会 去 服务 
端 请 求 该 路 由 组 件 模块 ， 请 求 完 之 后 会 执行 resolve 回调 ， 在 resolve 回调 中 ，vue-router 会 将 该 
组 件 泻 染 出 来 。 


// example/router-config.js 


module.exports = function configRouter (router) { 

// 定义 路 由 映射 规则 
router.map ({ 
// 常规 组 件 (一 级 组 件 ) 


'/home': ( 
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component: function (resolve) { 


require(['./components/home.vue'], resolve) 


} 

), 

// 常规 组 件 (一 级 组 件 ) 

'/about': { 
component: function (resolve) { 

require(['./components/about.vue'], resolve) 

} 

), 

// 未 匹配 时 的 路 由 组 件 


1*1; { 


component: function (resolve) { 


require(['./components/not-found.vue'], resolve) 


} 
} 
// 路 由 别名 配置 
router.alias ({ 
'/home/alias': '/home' 
} 
// 路 由 重 定向 
router.redirect ({ 
!'/': '/home' 
} 
// EMETA ZERIT» DUC TR hT RA 
router.beforeEach(function (transition) { 
// transition.to 表示 将 要 跳 转 到 的 路 由 对 象 


// transition.from 表示 当前 路 由 对 象 


if (transition.to.path === '/forbidden') { 
router.app.authenticating = true 
setTimeout(() => { 
router.app.authenticating = false 
// 终止 路 由 切换 ， 应 用 保持 
transition.abort() 
), 3000) 


} else { 


transition.next () 


248 ”Vue.js 权威 指南 


在 以 上 路 由 定义 中 ，require 了 根 目 录 下 的 app.vue 和 components 目录 下 的 home.vue、 
about.vue、not-found.vue 四 个 组 件 定义 文件 ， 每 个 文件 都 代表 一 个 路 由 组 件 模块 。 下 面 我 们 看 
看 路 由 组 件 的 定义 。 


app.vue 定义 了 根 组 件 ， 该 组 件 定 义 了 v-link 导航 部 分 以 及 根 视 图 router-view， 一 级 组 件 都 


会 泻 染 到 该 router-view 中 。 


// example/app.vue 
«style» 
.v-link-active { 
color: green; 
} 
[v-cloak] { 
display: none; 
} 
</style> 
<template> 
<div class-"wrapper"» 
<div class="nav"> 
<a v-link="{path: '/home'}">Home</a> 
<a v-link="{path: '/about'}">About</a> 
</div> 
<div class="router-view"> 
<router-view></router-view> 
</div> 
</div> 
</template> 
<script> 
module.exports = {} 


</script> 


home.vue, about.vue. not-found.vue 三 个 都 是 路 由 组 件 ， 是 平行 关系 , 这 里 主要 以 home.vue 


组 件 来 进行 分 析 。 


home.vue 组 件 匹 配 path 值 为 /home. 在 组 件 的 配置 对 象 中 , 除了 常规 Vue.js 组 件 的 属性 外 ， 
还 可 以 传 入 路 由 配置 对 象 route 属性 ， 用 来 控制 路 由 切换 过 程 中 的 各 个 阶段 。 route 是 一 个 对 象 ， 
它 可 以 接受 5 个 钩子 函数 属性 分 别 用 来 控制 切换 时 的 S 个 阶段 。 


SS 
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// example/components/home.vue 
«template» 
This Is {{title}} Page 
«/template» 
«script» 
// 组 件 配置 对 象 
module.exports = { 
// 路 由 配置 对 象 
route: { 
[** 
* 判断 组 件 是 否 可 重用 
* 只 有 当前 组 件 和 要 切换 到 的 组 件 的 根 路 径 相同 时 才 会 调用 该 钩子 函数 
*/ 


canResuse: function () { 


return true; 
}, 
/** 
* 从 其 他 路 由 切换 到 该 组 件 时 ， 会 调用 此 钩子 函数 判断 
* 可 和 否 切 换 到 该 组 件 ， 当 该 组 件 返 回 true 或 者 被 resolve 时 
* 才 会 认为 可 切换 到 此 组 件 ， 和 否则 将 会 取消 路 由 切换 ， 同 时 
* 停止 执行 之 后 的 钩子 函数 
at 


canActivate: function () { 


return true; 


Ls 


[** 
* d resolve 后 视图 开始 切换 的 同时 会 调 
* TER: 当 组 件 可 重用 时 ， 不 会 触发 该 钩子 函数 
*/ 
activate: function () { 
var self = this; 
this.timer = setTimeout(function () { 
belt counter 4e 17 
}, 3000); 
), 
[** 
* activate 被 resolve 后 ， 调 用 该 函数 获取 数据 
xi 


data: function () { 
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return { 
counter: 0 
】} 
), 
[** 
* canDeactivate fW resolve 后 调用 该 函数 ， 可 以 在 
* 函数 中 进行 一 些 组 件 移 除 前 的 清理 工作 ， 如 移 除 
* 定时 器 等 
iA 
deactivate: function () { 
// 清 理 activate 钩子 函数 中 的 定时 器 
clearTimeout (this.timer); 
} 
}, 
// 组 件 初始 化 时 数据 


data: function () ( 


return { 
title: 'Home', 


counter: 0 


} 
</script> 


14.11 常见 问题 解析 


1. saveScrollPosition 不 生效 
有 时 候 我 们 希望 在 路 由 视图 切换 后 ， 切 换 进 来 的 视图 保持 在 最 后 一 次 停留 的 位 置 。 根 据 官 方 
文档 , 我 们 需要 在 实例 化 vue-router 时 设置 saveScrollPosition 参数 值 为 true。 但 是 当 设 置 该 参数 值 
为 true 时 ， 点 击 v-link 元 素 导 航 切 换 到 新 视图 ， 发 现 视图 并 没有 停留 在 最 后 一 次 出 现 的 位 置 。 


对 于 这 个 问题 ， 我 们 需要 知道 : 


O ”saveScrollPosition 只 在 HTML5 模式 下 生效 ,在 实例 化 vue-router 时 ,需要 同时 设置 history 
值 为 tue。 代 码 示 例如 下 : 


var router = new VueRouter ({ 


saveScrollPosition: true, 
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history: true 
} 

O 视图 位 置 重 置 只 发 生 在 用 户 点 击 浏览 器 后 退 按钮 和 时， 因为 在 vue-router 中 通过 监听 
HTML5 history 的 popstate 事件 来 重 置 视图 位 置 。 因 此 在 点 击 v-link 元 素 切 换 视图 时 ， 
视图 位 置 不 会 发 生 重 置 。 

通过 实际 测试 发 现 ， 在 HTMLS 模式 下 尽管 saveScrollPosition 参数 值 为 false0， 但 是 对 于 
Chrome 和 Firefox 浏览 器 在 点 击 前 进 、 后 退 按钮 时 视图 位 置 也 会 被 重 置 为 最 后 一 次 出 现 的 位 置 
(浏览 器 特性 )。 


监听 不 到 查询 参数 


4 


时 候 我 们 需要 改变 hash 地 址 : 


的 查询 参数 ， 比 如 从 #!/books/search?cat=1 到 
1!/books/search?cat=2。 这 时 我 们 希望 根据 新 的 cat 参数 重新 向 服务 端 获取 数据 。 因 为 此 时 只 有 
查询 参数 发 生 了 变化 ，vue-router 认为 组 件 是 可 重用 的 ， 所 以 只 会 执行 data 钩子 函数 。 因 此 ,我 
们 需要 在 data 钩子 函数 中 执行 相应 的 逻辑 。 人 代码 示例 如 下 ; 
var Search = Vue.extend({ 
route: { 
data: function (transition) 


{ 
console.log(this.$route.params.cat) 


3. 判断 当前 路 径 和 目的 路 径 


时 候 我 们 需 


要 根据 当前 路 径 和 将 要 跳 转 到 的 路 径 来 决定 下 一 
钩子 函数 beforeEach 中 进行 判断 。 代 码 示例 如 下 


Var router = new VueRouter () 


步 的 操作 ， 这 时 可 以 在 全 局 


router.beforeEach(function 


(transition) 
// transition.from 为 当 


当前 路 由 对 象 
if 


(transition.from.path === '/noleaving') 


{ 


{ 
console.log('can not leave /noleaving') 
// 取消 此 次 路 由 切换 ， 停 留 在 当前 页 面 


transition.abort() 


return 


} 


// transition.to 为 


的 路 由 对 象 
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if (transition.to.path === '/forbidden') { 
console.log('can not go to /forbidden') 
// 取消 此 次 路 由 切换 ， 停 留 在 当前 页 面 


transition.abort() 


return 


} 
transition.next () 


} 


关于 transition 对 象 请 参阅 14.7 节 。 


4， 切 换 路 由 时 修改 页 面 标题 


函数 来 更 新 页 面 标题 的 方法 。 代 码 示例 如 下 : 


通常 在 切换 路 由 改变 视图 后 需要 更 新 页 面 标题 , 这 里 我 们 介绍 一 下 


Hr 


tud 


使 


] afterEach 


// 路 由 组 件 定义 ， 路 由 组 件 可 以 是 通过 Vue .extend 创建 的 构造 函数 ， 或 者 是 一 个 组 件 配置 对 象 


当 为 组 件 对 象 时 ，vue-router 内 部 会 自动 调用 Vue .extend 创建 构造 函数 
// 构造 函数 形式 


var Home = Vue.extend ({ 


template: 'This Is Home Page' 


// 组 件 配置 对 象形 式 
var About = ( 
template: 'This Is About Page' 
); 
// 根 组 件 ，vueRouter 实例 会 用 此 根 组 件 来 启动 应 
var App = Vue.extend({ 


template: document.querySelector('#rootTemplate') .textContent 


)); 

// 实例 化 vueRouter 

var router - new VueRouter() 
// 路 由 映射 配置 

router.map ({ 


'/home': { 


component: Home, 
// 组 件 对 应 的 页 面 标题 
docTitle: 'Home Page' 
), 
'/about': ( 
component: About, 


docTitle: 'About Page' 


La 


HET. 
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} 
} 
// 该 钩子 函数 在 目的 路 由 canActivate # resolve 之 后 执行 
router.afterEach(function (transition) { 
// transition.to 为 目的 路 由 映射 对 象 
document.title = transition.to.docTitle 
} 


// 启动 vue-router app 


router.start (App, '#app') 

5. canReuse 配置 无 效 

在 14.5.1 节 中 我 们 了 解 到 ， 第 一 阶段 为 组 件 可 重用 阶段 。 在 这 个 阶段 中 ，vue-router 首先 会 
判断 两 个 路 由 有 无 相同 的 根 组 件 , 如 果 没 有 则 认为 不 可 复 用 , 而 不 管 canReuse 的 值 是 否 为 true。 
如 果 有 相同 的 根 组 件 ， 才 会 进一步 判断 用 户 设 置 的 canReuse 的 值 。 判 断 组 件 是 否 可 复 用 流程 如 
图 14-6 所 示 。 


组 件 是 否 可 复 用 


1} 


路 由 是 否 有 公共 组 件 


canReuse 


true 


图 14-6 ”判断 组 件 是 否 可 复 用 流程 图 
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vue-cli 


使 用 Vuejs 开发 大 型 应 用 时 ， 我 们 需要 考虑 代码 项 
码 单元 测试 等 事情 。 如 果 每 个 项 目 都 要 手动 完成 这 些 工作 ，] 
们 会 使 用 一 些 脚手架 工具 来 帮助 完成 这 些 习 
(来 快速 构建 项 
151 ”安装 

vue-cli 是 用 node 编写 的 命令 行 工具 ， 我 们 需要 进行 全 局 安装 。 
命令 : 


$ npm install -g vue-cli 


SE: 请 确保 node 版 本 为 4x、5.X 及 以 上 。 


安装 完成 后 执行 如 下 命令 : 


$ vue -V 


如 果 能 显示 


示 vue-cli 的 版 本 号 ， 


15.2 ”基本 使 用 


我 们 可 以 使 用 vue-cli 来 快速 生成 一 个 基于 Webpack 构建 的 项 目 。 


下 命令 : 


则 表示 安装 成 功 ， 如 


热 加 载 、 代 


疑 效率 是 低下 的 ， 所 以 通常 我 


打开 命令 行 


图 15-1 所 示 。 


Ka 


415-1 


$ vue init webpack my-project 


查看 vue-cli 版 本 号 


打开 命令 行 


He. Æ Vue.js enun 以 使 用 vue-cli 脚手架 工 


终端 ， 输 入 如 下 


终端 , 输入 如 
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项 目 初始 


Project name 

Project description 

Author 

Use ESLint to lint your code? 

Pick an ESLint preset 

Setup unit tests with Karma + Mocha? 
Setup e2e tests with Nightwatch? 


vue-cli 


图 15-2 vue-cli init 命 令 初 始 化 


页 目 


化 完成 后 ， 会 在 当前 目录 下 生成 my-project 


目的 依赖 ， 执 行 如 下 命令 : 


$ npm install 


|-my-project 


Ko BEA my-project 


完成 后 ， 我 们 来 看 一 下 项 目的 目录 结构 ， 如 下 所 示 : 


|- build (构建 脚本 目录 ) 
|- config (构建 配置 目录 ) 
|- node modules KIIJ node 工具 包 目 录 ) 
|-src (源码 目录 ) 

|- assets (资源 目录 ) 

|- components (组 件 目录 ) 

|- App.vue (页 面 级 Vue 组 件 ) 

|- main.js (页 面 入 口 9S 文件 ) 
- static (静态 文件 目录 ) 
- test (测试 文件 目录 ) 
- indext.html (入 口 页 面 ) 
- .eslintrc.js (ES 语法 检查 配置 ) 
- package.json (项 目 描述 文件 ) 


我 们 启动 项 目 ， 执 行 如 下 命令 : 


$ npm run dev 


HA 


F 浏 览 


， 输 入 http://localhost:8080， 生 成 的 页 面 如 图 15-3 所 示 。 


人 后 ， 会 有 一 些 命令 行 交 互 ， 我 们 可 以 初始 化 一 些 项 目 信 息 ， 如 网 15-2 所 示 。 


录 ， 安 装 项 
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Hello World! 


Welcome to your Vue.js app! 


To get a better understanding of how this boilerplate works, check out its 
documentation. It is also recommended to go through the docs for Webpack and 
vue-loader. If you have any issues with the setup, please file an issue at this 
boilerplate's repository. 


You may also want to checkout vue-router for routing and vuex for state 
management. 


图 15-3  vue-cliIHI-F AR ^E X I] 47] 48 V TR 


接 下 来 我 们 打开 src/components/Hello.vue， 修 改 一 行 代 码 ， 如 下 所 示 : 


export default { 
data () { 
return { 
// note: changing this line won't causes changes 
// with hot-reload because the reloaded component 
// preserves its current state and we are modifying 
// its initial state. 


msg: 'Hello DDFE!' 


Em 


然后 刷新 浏览 器 ， 可 以 看 到 内 容 发 生 了 变化 ， 如 图 15-4 所 示 。 


Hello DDFE! 


Welcome to your Vue.js app! 


To get a better understanding of how this boilerplate works, check out its 
documentation. It is also recommended to go through the docs for Webpack and 
vue-loader. If you have any issues with the setup, please file an issue at this 
boilerplate's repository. 


You may also want to checkout vue-router for routing and vuex for state 
management. 


图 15-4 ”vue-cli 修 改 代码 后 的 页 面 
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我 们 可 以 根据 项 目 需 求 做 任何 修改 ， 可 以 在 脚手架 的 基础 上 构建 任何 复杂 的 应 用 。 


153 tas 


vue-cli 安装 后 的 全 局 命令 是 vue， 它 文 持 以 下 两 个 子 命令 : 


$ vue init <template-name><project-name> 


$ vue list 


15.3.1 init 


init 命令 用 来 基于 指定 模板 生成 项 目 结构 。 其 中 template-name 为 模板 名 ,project-name 为 要 
生成 的 目录 名 。 关 于 模板 请 参阅 15.4 节 。 


15.3.2 list 


init 命令 用 于 列 出 所 有 可 用 的 模板 ， 通 过 查询 https://api.github.com/users/vuejs-templates/repos 
这 个 API 接口 可 以 得 到 所 有 列表 。 源 码 实现 如 下 : 


<!-- 源 码 目录 bin/vue-1ist--> 


request( 
url: 'https://api.github.com/users/vuejs-templates/repos', 
headers; { 
'User-Agent': 'vue-cli' 


} 
}, function (err, res, body) { 
if (err) logger.fatal (err) 
console.log(' Available official templates:') 
console.log() 
JSON. parse (body) .forEach (function (repo) { 
console.log( 
! C o chalk.yellow('*') + 
' ' + chalk.blue(repo.name) + 


' - ' + repo.description) 
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15.4 ”模板 
vue-cli 是 一 个 项 目 脚手架 工具 ， 它 支持 通过 模板 来 生成 项 目 结构 。 在 153 节 中 ， 我 们 了 解 
到 在 执行 init 命令 时 可 以 指定 模板 的 名 字 。 在 默认 情况 下 ，vue-cli 会 根据 所 传 入 的 模板 名 字 去 


github 中 查找 模板 。 
vue-cli 的 模板 分 为 官方 模板 、 自 定义 模板 和 本 地 模板 。 


注 : 所 有 模板 默认 对 应 2.0 RA, 要 安装 1.0 版 本 的 模板 , 可 以 用 vue-cli init webpack-simple 
#1.0 my-project 这 样 的 语法 。 


15.4.4 官方 模板 


在 使 用 之 前 ， 可 以 先 用 vue list 命令 查询 都 有 哪些 模板 可 供 使 用 ， 之 后 通过 vue init 命令 来 
生成 相应 模板 的 项 目 结构 。 模 板 分 为 基础 和 高 级 两 个 版 本 ， 其 中 基础 版 本 用 于 快速 构建 原型 ; 
高 级 版 本 用 于 正式 开发 。 所 有 模板 都 支 持 *.vue 组 件 。 


目前 官方 提供 了 以 下 模板 : 


O Browserify 拥有 高 级 功能 的 Browserify + vueify 用 于 正式 开发 。 

O browserify-simple 拥有 基础 功能 的 Browserify + vueify 用 于 快速 开发 。 

O browserify-simple-2.0 拥有 基础 功能 的 Browserify + vueify HF Vue.js 2.0 快速 开发 。 
O simple 一 一 单个 HTML， 用 于 开发 最 简单 的 Vuejs 应 用 。 

O simple-2.0 一 一 单个 HTML， 用 于 开发 最 简单 的 Vuejs 2.0 应 用 。 

O webpack 一 一 拥有 高 级 功能 的 Webpack + vue-loader 用 于 正式 开发 。 

O webpack-simple 一 一 拥有 基础 功能 的 Webpack + vue-loader 用 于 快速 开发 。 

O webpack-simple-2.0 拥有 基础 功能 的 Webpack + vue-loader 用 于 Vue.js 2.0 快速 开发 。 


154.2 自 定 义 模板 


当 官 方 模 板 不 能 满足 需求 时 ， 我 们 可 以 fork 官方 模板 按照 自己 的 需求 修改 后 ， 通 过 vue-cli 
命令 生成 基于 自己 模板 的 项 目 结构 : 


$ vue init username/repo my-project 
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15.4.3 ”本 地 模板 


除了 从 github 下 载 模 板 外 ， 我 们 还 可 以 从 本 地 加 载 模板 : 


$ vue init ~/fs/path/to-custom-template my-project 


15.5 不错 的 工具 包 


F 


vue-cli 内 部 使 用 了 很 多 第 三 方 npm 包 来 帮助 自己 实现 一 些 基础 功能 。 接 下 来 我 们 介绍 其 中 


一 些 不 错 的 工具 包 。 


N 
4r 


15.5.41 commander 


commander 是 一 个 命令 行 接口 的 解决 方案 ， 它 提供 了 一 些 接口 方便 我 们 对 命令 行 的 命令 做 
解析 。 


仓库 地 址 : https://github.com/tj/commander.js 


15.5.2 download-git-repo 


download-git-repo 用 来 将 相应 的 git Æ (GitHub, GitLab, Bitbucket) 下 载 到 指定 的 本 地 
文件 夹 。 


仓库 地 址 : https://github.com/flipxfx/download-git-repo 


15.5.3 inquirer 


inquirer 是 一 个 常见 的 交互 式 命令 行 用 户 页 面 的 集合 ， 它 可 以 简化 以 下 流程 : 
O 提供 错误 反馈 。 
O 询问 问题 。 


O 解析 输入 。 


Q 验证 结果 。 


仓库 地 址 : https://github.com/SBoudrias/Inquirer.js 
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15.5.4 ora 


ora 可 以 让 我 们 在 终端 展示 加 载 效果 ， 如 图 15-5 所 示 。 


图 15-5 ”ora 加 载 效果 


仓库 地 址 : https://github.com/sindresorhus/ora 


# 16 x 
测试 开发 与 调试 


任何 实际 项 目的 开发 都 不 仅仅 是 完成 编码 , 规范 的 开发 流程 和 严谨 的 测试 都 是 不 可 或 缺 的 。 
合理 使 用 各 种 工具 来 进行 测试 开发 与 调试 ， 能 够 极 大 地 提升 编写 代码 的 效率 ， 使 开发 过 程 事 半 
功 倍 、 对 于 提高 代码 质量 、 稳 定 线 上 服务 至 关 重 要 。 


Vue.js 除了 是 一 个 前 端 类 库 之 外 , 还 开发 了 许多 配合 使 用 的 工具 。 比 如 Chrome 下 的 调试 工 
L 、 编 辑 器 下 的 高 亮 工具 等 。 正 是 这 样 一 个 完整 的 生态 环境 ， 使 得 用 Vue.js 开发 变 得 更 加 简便 。 
本 章 将 为 大 家 介绍 几 个 常用 的 配合 Vue.js 使 用 的 工具 。 


16.1 测试 工具 


16.1.1 ESLint 


在 日 常 的 团队 开发 中 ， 为 了 避免 出 现 低级 bug 和 统一 代码 风格 ， 通 常会 在 开发 前 约定 一 套 
编码 规范 。 为 了 保证 规范 的 执行 ， 可 以 使 用 Lint 工具 和 代码 风格 检测 工具 


ESLint 就 是 一 个 Lint 工 具 , 它 是 由 JS 红 宝 书 的 作者 Nicholas C. Zakas 创立 的 一 个 开源 项 目 ， 
旨 在 为 大 家 提供 一 个 可 扩展 、 每 条 规则 独立 、 不 内 置 编码 风格 的 语法 检查 工具 。ESLint 有 别 于 
JSLint 的 地 方 就 是 它 被 设计 成 完全 可 配置 的 ， 每 一 条 规则 都 是 一 个 插件 ， 用 户 完全 可 以 根据 自己 
的 需求 来 选择 使 用 哪些 规则 。 比 如 报错 就 可 以 设计 为 “警告 ”和 “错误 ”两 个 等 级 ， 或 者 禁用 。 


下 面 介绍 一 下 ESLint 的 配置 。 


在 项 目 中 配置 ESLint 有 两 种 基本 方法 : 


O JH JavaScript 注解 的 方式 将 配置 信息 直接 加 到 文件 里 。 
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O 使 用 JavaScript. JSON 或 YAML 文件 为 整个 目录 定义 配置 信息 。 文 件 格 式 可 以 
是 .eslintrc.* 或 package.json。ESLint 会 自动 查找 并 读 取 配置 文件 。 


需要 配置 的 有 以 下 几 块 信息 ， 所 有 这 些 配置 都 将 细 粒 度 地 决定 ESLint 如 何 检测 代码 。 这 里 
以 JSON 格式 为 例 ， 展 示 一 下 基本 的 配置 规则 。 


1. Enviroments 

脚本 将 要 运行 的 环境 ， 每 个 环境 都 有 自己 预定 义 好 的 全 局 变量 集合 。 通 过 env 关键 字 配 置 
Environments 选项 ， 下 面 的 配置 表示 脚本 将 运行 在 浏览 器 (browser) 和 node 环境 。 还 可 以 配置 
Commonjs、jQuery 等 很 多 选项 。 


<!-- package.json --> 
{ 
"env": { 
"browser": true, 


"node": true 


2. Globals 


在 脚本 运行 期 间 需 要 额外 加 入 的 全 局 变量 。 当 变量 在 当前 文件 中 未 定义 却 被 访问 时 ， 会 触 
发 未 定义 规则 警告 。 因 此 , 如 果 设 置 了 一 些 全 局 变量 , 则 需要 在 ESLint 的 配置 文件 中 进行 配置 。 


<!-- package.json --> 
{ 
"globals": { 
"varA": true, 


"varB": false 


上 述 配置 表明 vara, varB 都 是 全 局 变量 ， 其 中 varB 的 值 不 可 写 ( 只 读 )。 


3. Rules 


ESLint 提供 了 大 量 的 规则 ， 用 户 通过 配置 规则 是 否 生效 来 定义 自己 的 项 目 需要 使 用 哪些 规则 。 


<!-- package.json --» 


{ 
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"rules": { 
"eqeqe": "off", 


"curly": "error" 


16.1.2 ”工具 包 


1. eslint-loader 


配合 Webpack 使 用 的 ESLint loader. 


安装 : 

$ npm install eslint-loader 
使 用 方法 : 

<!-- webpack.config.js--» 


module.exports = { 
J Jas 
module: { 


loaders: [ 


(test: /\.js$/, loader: "eslint-loader",exclude:/node_modules/} 


KAP 


当 使 用 编译 类 的 loader (bable-loader) 时 要 确 


保 处 理 顺 序 正 确 ， 从 下 至 上 为 处 理 顺 序 ， 所 


以 语法 检查 要 放 在 最 下 下 


i。 为 保险 起 见 ， 也 可 以 使 


被 编译 前 进行 检查 。 


2. eslint-friendly-formatter 


xx 2E AA STRABO JF HORE SG eS AAT JI 


件 。 它 可 以 被 当 作 一 个 模块 引用 


还 可 以 配合 gulp 


3. eslint-config-standard 


如 果 觉 得 自己 配置 很 麻烦 ， 也 可 以 使 
标准 格式 配置 。 其 用 法 也 非常 简单 ， 在 自己 的 工程 ， 


preLoaders 配置 项 ， 


确保 对 源 代码 在 没有 


或 grunt 使 用 。 


F Sublime 或 iTerm2 X: 


] 这 个 组 件 ， 它 为 大 家 提供 了 


加 入 如 下 .eslintre 文件 


些 可 共享 的 JavaScript 


o 
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<!-- .eslintrc 文件 --> 
( 


"extends": "standard" 


4. eslint-plugin-html 
一 个 支持 从 HTML 等 文件 的 <script> 标 签 中 读 取 配置 的 插件 。 通 常 其 配置 文件 都 是 JS 文件 。 
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16.2.1 Vue Syntax Highlight 


开发 Vue.js 项 目 时 还 可 能 会 遇 到 一 个 问题 ， 就 是 .vue 后 绥 文 件 中 的 内 容 是 不 会 被 自动 高 亮 
显示 的 ， 感 觉 像 在 日 记 本 里 开发 一 样 。 不 过 没有 关系 ，Vue.js 团队 已 经 帮助 我 们 开发 了 可 以 在 
Sublime 中 使 用 的 插件 一 一 Vue Syntax Highlight。 其 安装 方法 如 下 : 


sublime->preference->package-control->package-install->Vue Syntax Highlight 


16.2.2 Snippets 


Snippets 是 一 个 帮助 提高 开发 效率 的 小 工具 ， 通 过 它 可 以 自动 补 全 ， 我 们 只 需 输 入 一 些 简 
写 的 命令 就 可 以 自动 生成 代码 。 比 如 : 


db + Tab -> debugger 


a 
pur 


Tab -» console.log 


在 Sublime 中 可 以 选择 Tools New Snippet 来 添加 。 在 github 上 有 许多 别人 配置 好 的 文件 
可 供 参考 。 


«!-- Snippet 文件 的 基本 格式 --> 
<snippet> 
<content> 
<![CDATA[Hello, ${1:this} is a ${2:snippet}.]]> 
</content> 
<!-- <tabTrigger>hello</tabTrigger> --> 
<!-- <scope>source.python</scope> --> 
</snippet> 


<![CDATA[Hello, ${1:this} is ag${2:snippet}]> 标 签 中 的 是 缩写 补 全 后 的 样子 ，${l:this} 是 第 
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一 个 输入 点 ，${2:snippet} 是 第 二 个 输入 点 


比如 想 快 速 和 9 
<!-- snippet 文件 配置 示例 --> 
<snippet> 


<content><! [CDATA[ 
<div v-if="${1}">${2}</div> 
]]></content> 
<tabTrigger>v-if</tabTrigger> 
<scope>text.html</scope> 
«description»&lt;d 


</snippet> 


保存 后 ， 就 可 以 通 


16.2.3 ”其 他 编辑 器 /IDE 


除了 Sublime Text， 前 端 
Studio Code 也 添加 了 对 Vue.j 
式 来 识别 以 .vue 为 后 级 的 文 伯 


WebStorm 


的 语法 支持 
的 。 


S 


1. 


WebStorm 中 


过 输入 v-if+ Tab 来 获 


。 补 全 后 输入 点 之 间 可 以 通过 Tab 切换 。 


E 成 一 个 包含 vaf AY div 组 件 ， 可 以 进行 如 下 配置 : 


iv v-if=""&gt;</description> 


得 <div v-if-' '></div> J . 


于 发 利器 WebStorm 以 及 微软 新 推出 的 风头 正 劲 的 编辑 器 Visual 
。 二 者 同 Sublime Text 一 样 ， 也 是 通过 安装 插件 的 方 


于 支持 Vue.js 的 插件 名 称 就 叫 Vue.js， 安 装 方式 是 : Preferences 一 Plugins 一 


区 


Browse Repositories 一 Vue.js 一 Install， 如 


16-1 所 示 。 


安装 完 Vue.js 插件 后 ， 重 启 WebStorm， 可 以 发 现 ， 以 .vue 结尾 的 文件 已 经 能 够 被 识别 ， 出 
现 语 法 高 亮 显示 ， 如 图 16-2 所 示 。 
从 图 16-2 可 以 看 到 ， 虽 然 WebStorm 已 经 支持 .vue 后 绥 文 件 的 语法 高 亮 显示 ， 但 是 其 对 文 


f 
类 型 为 XML Attribute Injection, Add 


图 


然 


的 ES 6 语法 并 不 识别 ,解决 方式 是 在 Preferences Editor Language Injections 中 添加 一 项 ， 


16-3 所 示 。 


然后 在 <script 标签 ! 
WebStorm 完成 对 .vue 后 级 文 但 


写 入 type Jat 


的 全 部 识别 ， 如 


FE， 如 <script type="es6"></script> 即 可 。 如 此 便 可 使 
图 16-4 所 示 。 
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Browse Repositories 


Qr Vue.js ©) (D | Category: All - 


Vue.js| 
FRAMEWORK INTEGRATION 


HTTP Proxy Settings... 


Sort by: name x | | FRAMEWORK INTEGRATION 
Vue.js 


2 months ago EH Install 


Arkh 9338 downloads 
Updated 16/3/30 v1.1.0 
Support tor fs 


Change Notes 


9,338 


Fixed autocompletion for real. Increased * Mf file recognition. Fixed 
plugin loading issues. 


Vendor 


john Kelly 
johnmkelly86 (gmail.com 


Size 


86K 


Manage repositories... 


图 16-1 


WebStorm 安 装 Vue.js 插 件 界 


E Project | 


v Eisre 
» Bassets 
» EXcomponents 
> Dlibs 
vy Dviews 
Y about.vue 
Y index.vue 
Y list.vue 
Y login.vue 
Y message.vue 
Y new.vue 
Y topic.vue 
Y user.vue 
[5 filters js 
[5 main.js 
[3 routers.js 
® .gitignore 
[È gulpfile.js 
F) index.html 
ii package.json 
li README.md 
[5 server.js 
{is webpack.config.js 
ij; External Libraries 


Qo 


$- l- | V indexvue x 


v DVue-cnodejs-master (~/Desktop/Vue-cno 


OOND PRPWNE 


<template> 
«1-- 全 局 header --> 
«div» 

«img class-"index" src-". 
«/div» 

«/template» 

«script» 
require('../assets/scss/iconfont/iconfont.css'); 
require('../assets/scss/CV.scss'); 
require('../assets/scss/github-markdown.css'); 


./assets/images/index.png"» 


export default ( 


ready (){ 
setTimeout(() => { 
this.$route.router.go({ name: ‘list'}); 


),2000); 
</script> 
<style lang="sass"> 
.index( 


width: 100%; 
background-color: #fff; 
margin-top: 40%; 
I 
«/style» 


WebStorm 识 别 .vue 后 级 文件 
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Q Editor > Language Injections © For current project 
Appearance & Behavior | Name ~ | Language | Scope 
Keymap xml: */@href [® JavaScript Built-in 
Editor xml: */@on.* [® JavaScript Built-in 
General xml: */@style B css Built-in 
Colors & Fonts xml: script 区 JavaScript Built-in 
Code Style a xml: script6 [E ECMAScript 6 IDE 
Inspections [5] xml: style E CSS Built-in 
File and Code Templates © e o Language Injection Settings 
File Encodings m 
Live Templates Name: | script6 
i | 
File Types Gogue 
Emmet 
Images ID: [3 ECMAScript 6 (ECMAScript 6 files) 
Intentions Pdf | 
Language Injections 
Spelling © Suffix: | 
TextMate Bundles 
TODO XML Tag 
COE Local name: Sub-tags 
Version Control > 
Project: Vue-cnodejs-master Namespace: 
Build, Execution, Deployment 
Languages & Frameworks XML Attribute 
Tools Local name: | <script> 
Namespace: E 
+ -ZR eu 
GERENS B of 6 places enabled) 
Value pattern: | | Single file | 
2 hee jo» | B 
XPath condition: | @type=es6 
2 canco Ta 
Nene IS 
图 16-3 WebStormiH RIES 6 语法 
E Project - © = æ- l- | V indexvue x 
ene (~/Desktop/Vue-cno seripe 
Bassets T «template» 
components 2 <!-- 全 局 header --> 
libs 3 <div> 
views 4 «img class="index" src="../assets/images/index.png"> 
Y about.vue 5 «/div» 
Y index.vue 6 «/template» 
¥ list. vue 7 «script type="es6"> 
'Y login.vue 8 require('../assets/scss/iconfont/iconfont.css'); 
Y message.vue 9 _ require('../assets/scss/CV.scss'); 
Y new.vue 10 require('../assets/scss/github-markdown.css'); 
W topic.vue 11 
Y user.vue 12 
[& filters.js 13 export default { 
[i main js 14 ready ()( 
[i routers.js 15 setTimeout(() => { 
© gitignore 16 this.$route.router.go({ name: 'list']); 
[È gulpfile.js 17 }, 2000); 
[8] index.html 18 } 
I$ package.json 19 } : 
Eè README.md 20 </script> 
[3 servers 21 <style lang="sass"> 
[© webpack.config.js 22 . index{ 
uh External Libraries 23 width: 100%; 
24 background-color: &fff; 
25 margin-top: 40%; 
26 
27 </style> 
28 
29 


图 16-4 WebStorm 识 别 ES 6 语法 


除 此 之 外 ,在 WebStorm 中 对 *.js 文件 的 ES 6 语法 文 持 设 置 方式 是 :Preferences 一 Languages 
& Frameworks 一 JavaScript 一 JavaScript language version: ECMAScript 6， 如 图 16-5 所 示 。 
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scp 


e 
Q 


Appearance & Behavior 
Keymap 

Editor 

Plugins 

Version Control 

Project: vue-dev 


Build, Execution, Deployment 


Languages & Frameworks 


Libraries 
Code Quality Tools 
Templates 
Bower 
Yeoman 
PhoneGap/Cordova 
Meteor 
Schemas and DTDs 
Compass 
Dart 
Markdown 
Node.js and NPM 
Template Data Languages 
TypeScript 
XSLT 
XSLT File Associations 
Tools 


a 


Languages & Frameworks > JavaScript 


JavaScript language version 


Prefer Strict mode 


Only type-based completion 


Preferences 


图 16-5 WebStorm X f$ES 6 语法 通 


For current project 


Jit 


Cancel 


ECMAScript 6 B Use special to-JavaScript compiler with this version 


Apply 


在 Visual Studio Code 〈 以 下 简称 VSC) 中 为 Vue.js 提供 语法 高 亮 显示 的 插件 名 称 为 vue， 


如 


vue 插件 在 VSC ! 
vue", 按 回 车 键 ， 即 可 成 功 安装 。 


图 16-6 所 示 。 


vue 


liuji-jim | Š 4019 installs | de x sco x (1) 


Syntax Highlight for Vue,js 


Installation 


Launch VS Code Quick Open (3t), paste the following command, and type enter. 


ext install vue 


插 伯 


安装 完成 后 ， 重 启 YSC， 插 伯 


图 16-6 VSCH 


F 即 可 生效 ， 如 


Copy 


的 vue 插 件 


| More Info 


的 安装 方式 是 , 按 “Cmd+P” 快 捷 键 呼出 VSC 


图 16-7 所 示 。 


DA 


令 行 , 然 后 键入 "ext install 


Ap 
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@0e app.vue - vue-loader-example 


EXPLORE 
4 WORKING FILES | e lang="j 
app.vue src ( 1 
class 
4 VUE-LOADER-EXAMPLE 


{{msg}} 


asro 
> assets 
4 components 
avue 
b.vue 


counter.vue CompA from './components/a.v 


app.vue CompB from './components/b.v 
main.js Counter from './components/counter.vue' 
ee default { 
data () { 
return K] 
msg: 'Hello from vue-loader!' 


index.html 
package.json 
README.md 
webpack.config.js 
u 
components: { 
CompA, 
CompB, 
Counter 
y 
d 


style lang-"stylus"» 
font-stack - Helvetica, sans-serif 
primary-color = #999 
body 

font 100% font-stack 

color primary-color 


$mese O0AO0 Lni7,Codi3 UTF8 LF Vuejs 图 


图 16-7 VSC 识 别 .vue 后 级 文件 


T 


16.3 ”调试 工具 


Vue.js 团队 还 为 大 家 提供 了 Chrome 下 的 调试 工具 ,可 以 在 Chrome 的 插件 商店 找到 并 安装 ， 
如 图 16-8 所 示 。 


开发 者 工具 
Akik (147) 


Vue.js devtools 十 添加 至 CHROME 
wv 由 vuejs.org 提供 


Chrome devtools extension for debugging Vue.js applications 


D 


16-8 ” Chrome 的 Vue.js 调 试 插件 一 一 Vue.js devtools 


安装 成 功 后 ， 在 Chrome 调试 状态 下 的 工具 栏 中 就 会 出 现 Vue Devtools 选项 ， 选 中 后 界面 
16-9 所 示 。 


D 


如 


该 工具 可 以 展示 出 各 个 组 件 的 层级 结构 、 组 件 当前 的 状态 、 组 件 的 prop 值 。 还 可 以 通过 点 
击 Inspect Dom 一 键 返回 到 DOM 结构 的 查看 页 面 。 
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[x à] Elements Console Sources Network Timeline Profiles ^ Resources Vue Devtools [> 


Q Filter components 


v -Root 


Lamp 
v -Room 
Switch 


status: "off" 


wv Instance selected: Lamp X, Components 4t) Vuex {Ls Refresh 


图 16-9 Vue DevtoolsJ T 


如 果 无 法 翻 墙 使 用 Chrome 的 软件 商店 ， 也 可 以 在 Vue.js 的 github 上 找到 源码 自 


地 址 为 https://github.com/vuejs/vue-devtools。 


己 编译 


*&l/s 


Scrat*Vue.js 的 化 学 反应 


Vue.js 是 一 个 小 而 美的 库 ， 非 常 适 合 开发 一 些 webapp 项 目 。 我 们 团队 webapp 的 技术 栈 是 
用 Scrat 进行 模块 化 和 构建 的 , 自然 会 考虑 到 用 Scrat +Vue.js 做 一 套 完整 的 移动 端 开 发 解决 方案 ， 
使 前 端 工程 化 +Vue.js 完美 结合 。 既 然 提 到 前 端 工程 化 ， 那 就 让 我 们 先 来 认识 一 下 它 。 


17.1 浅 谈 前 端 工 程 化 


现 如 今 ， 前 端 可 谓 是 包罗 万 象 ， 产 品 形态 五 花 八 门 ， 有 小 而 美的 前 端 基础 库 、 酷 炫 的 运营 
活动 页 、 好 玩 的 h5 小 游戏 等 。 不 过 这 些小 项 目 并 非 是 前 端 技术 的 主要 应 用 场景 。 更 具有 商业 价 
值 的 是 复杂 的 Web 应 用 ， 如 新 闻 聚 合 网 站 、 在 线 购 物 平台 、 社 交 网 络 平台 、 金 融 信贷 应 用 、 直 
播 互动 社区 、 打 车 出 行 软件 等 ， 它 们 功能 完善 、 界 面 繁多 、 交 互 复杂 ， 为 用 户 提供 了 完整 的 用 
户 体验 。 


这 些 复杂 的 Web 应 用 ， 一 般 需 要 几 十 、 上 百人 共同 开发 维护 ， 其 前 端 界 面 也 颇具 规模 ， 工 
旦 量 是 非常 庞大 的 ， 这 就 要 求 我 们 从 软件 工程 的 角度 来 思考 前 端 开发 ， 用 工程 化 的 手段 来 解决 
前 端 开 发 中 遇 到 的 各 种 问题 ， 提 升 团队 的 开发 效率 。 这 就 是 所 谓 的 前 端 工 程 化 。 


17.2 “前端 工程 化 怎么 做 


一 些 人 可 能 认为 ， 前 端 工程 化 无 非 就 是 库 /框架 选 型 + 简单 的 构建 化 +JavaScript/CSS 模块 化 
开发 。 其 实 这 些 只 是 工程 化 的 一 部 分 ， 当 我 们 开发 一 个 完整 的 Web 应 用 时 ， 将 面临 更 多 的 工程 
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问题 ， 如 : 如 何 多 人 协作 开发 、 组 件 模块 如 何 复 用 、 如 何 调试 部 署 、 版 本 如 何 管理 控制 、 性 能 


如 何 优化 等 。 因 此 ， 想 做 好 前 端 工 程 化 ， 需 要 做 好 以 下 儿 件 事 : 


1. 开发 规范 


制定 好 开发 、 部 署 的 目录 规范 、 编 码 规范 。 好 的 


录 规 范 能 让 项 目 结构 清晰 ， 便 于 维护 和 


扩展 :好 的 编码 规范 能 让 团队 内 同学 的 代码 风格 统 
2. 模块 化 


， 便 于 代码 审查 。 


针对 JavaScript、CSS， 以 功能 或 业务 为 单元 组 织 代码 。JavaScript 模块 化 方案 很 多 ， 如 


AMD/CommonJS/UMD/ES 6 Module 等 。CSS 模块 化 ] 
处 理 器 的 import/mixin 特性 支持 下 实现 的 。 


3， 组 件 化 


tH 


4. 组 件 库 
有 了 组 件 化 ， 我 们 还 希望 把 一 些 非常 通 
上 共 团 队 共 享 ， 方 便 新 项 目的 复 用 ， 这 就 形成 了 组 件 库 。 


5， 性 能 优化 
通过 工程 化 手段 来 解决 性 能 优化 问题 。 比 如 第 见 的 


沿 的 优化 手段 如 bigpipe 和 bigrender, 都 是 通过 工程 化 手段 来 保证 的 , 而 对 业务 玫 


6. 项目 部 署 


项 目 部 署 一 般 包括 静态 资源 缓存 、CDN、 增 量 发 布 等 问题 。 合 汉 
端 性 能 带 来 较 大 的 优化 空间 ， 而 增 量 发 布 又 为 项 目的 版 本 探 人 


7.， 开 发 流程 


于 发 基本 上 都 是 在 less. sass. stylus 等 预 


的 组 件 或 者 JavaScript 模块 放 


把 页 面 拆 分 成 多 个 组 件 〈component)， 每 个 组 件 依赖 的 CSS、JavaScript、 模 板 、 
源 放 在 一 起 开发 和 维护 。 组 件 是 资源 独立 的 ， 组 件 在 系统 内 部 可 复 月 
套 。 现 在 流行 的 一 些 框架 如 Polymer, React. Vue.js 等 都 提倡 组 件 化 


到 一 


图 片 等 资 


， 组 件 和 组 件 之 间 可 以 说 
开发 方式 。 


个 公共 的 地 方 


常见 的 组 件 库 有 bower、component 等 。 


请 求 合并 、 


态 资 


PN 人 


资源 压缩 、CDN， 
F 发 者 是 透明 的 。 


fll, A/B Test 方案 提供 了 保证 。 


+ 至 一 些 前 


源 部 署 可 以 为 前 


完整 的 开发 流程 包括 本 地 化 开发 调试 、 视 觉 走 查 确 认 、 前 后 端 联 调 、 测 试 、 上 线 等 环节 ， 


8. 工程 工具 
工程 工具 包括 构建 与 优化 工具 、 开 发 


些 工具 对 开发 流程 进行 改善 可 以 大 幅度 降低 研发 成 本 。 


调试 


部 署 等 流程 工具 、 组 件 


类 取 和 提交 工具 等 。 这 
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些 工 具 往往 都 是 独立 的 系统 ， 如 果 分 开 来 用 ， 成 本 太 高 了 。 因 此 能 否 串联 这 些 功能 ， 使 得 前 端 开 
发 可 以 持续 集成 ， 工 具 的 设计 就 变 得 至 关 重 要 了 。 接 下 来 将 要 介绍 一 套 前 端 集成 解决 方案 一 一 
Scrat。 它 集合 了 这 些 工程 工具 ， 同 时 还 集合 了 上 述 提 到 的 7 项 前 端 工 程 化 所 需 的 技术 要 素 。 


最 后 ， 我 们 通过 一 张 图 再 总 结 一 下 前 端 工程 化 所 需 的 8 大 要 素 ， 它 们 之 间 并 非 孤 立 ， 而 是 
存在 一 定 的 联系 ， 如 图 17-1 所 示 。 


| 性 能 优化 \ | 项 


部 署 | 

| 
rare aa Sl ; 
| 模块 化 | , 程 工具 — 开发 流程 | 


B 组 件 化 of 组 件 库 = 


— 开发 规范 | 


图 17-1 ”前 端 工程 化 8 大 要 素 


17.3 Scrat 简介 


Scrat 是 UC 团队 在 百度 的 FIS 基础 上 二 次 开发 的 webapp 模块 化 开发 框架 ， 它 的 功能 非常 
强大 ， 如 图 17-2 所 示 。 


webapp 模 块 化 开发 体系 模块 化 开发 按 版 本 发 布 模块 生态 
<> A 
em 
按 需 加 载 请 求 合 并 本 地 缓存 
Ø LT 1-1 
eus RD) 
apu uw 
代码 压缩 代码 校 验 cs ERA 
-A o n 
RI 
本 地 服务 器 文件 监听 自动 刷新 
B U^ x 
ARAR 多 语言 编译 项 目 脚手架 


图 17-2 scrat-webapp 模 块 化 开发 框架 
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Scrat 拥有 前 端 工程 化 所 需 的 所 有 能 力 ， 


的 理念 是 希望 像 搭 积木 一 样 开发 和 维护 系统 ， 
化 开发 。 同 时 ， 每 次 研发 新 产品 都 不 是 从 零 姑 
下 来 ， 这 就 形成 了 组 件 库 。 


JavaScript、CSS、 模 板 、 
即 可 。 其 中 ， 工 程 模块 是 当前 工程 所 ] 
是 一 些 通用 性 比较 高 的 模块 ， 基于 component 


AE 


安装 到 本 地 工程 中 。 


它 最 大 的 特色 就 是 模块 化 开发 和 模块 生态 。Scrat 
通过 组 装 模 块 得 到 一 个 完整 的 系统 ， 这 就 是 组 件 


F 始 ， 不 同 团队 、 不 同 项 目 能 有 可 复 用 的 模块 沉淀 


在 Scrat 中 ,静态 资源 分 为 模块 化 资源 和 非 模块 化 资源 两 类 ,其 中 模块 化 资源 还 分 为 工程 模 
块 和 生态 模块 两 类 ， 如 图 17-3 所 示 。 


1. 模块 化 资源 


模块 化 资源 


非 模 块 化 资源 


工程 模块 


生态 模块 


图 17-3 ”静态 资源 划分 


模块 化 资源 是 具有 独立 性 的 模 快 所 对 应 的 静态 资源 。 每 个 独立 的 模块 都 将 自己 所 依赖 的 


图 片 等 资源 放 在 一 起 维护 , 使 得 模块 具备 独立 性 , 引用 模块 的 JavaScript 


2， 非 模块 化 资源 


开发 的 模块 ， 它 们 往往 与 业务 耦合 度 较 高 ， 生 态 模块 通常 


规范 开发 ， 部 署 到 github 上 ， 可 以 通过 Scrat 命令 


在 项 目 中 并 不 是 所 有 资源 都 应 该 被 模块 化 ， 也 有 一 些 非 模块 化 资源 ， 一 般 为 入 口 页 面 、 模 


块 化 框架 JavaScript、 第 三 方 JavaScript 库 、 页 面 启动 JavaScript 等 。 


其 目录 规范 为 : 


project 


|- views 


|- component modules 〈 生 态 模块 ) 


|- components (工程 模块 》 


一 


非 模块 资源 ) 
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17.4 Scrat+Vue.js 实现 组 件 


Scrat 的 模块 化 、 组 件 化 思想 可 以 很 好 地 与 Vue.js 配合 ， 让 我 们 来 看 看 如 何在 Scrat 项 目 中 
定义 一 个 Vue 组件。 比如 定义 一 个 header 组 件 ， 目 录 结 构 如 下 : 


components 


|- header 

|- header.js 

|- header.styl 

|- header.tpl 
|- logo.png 


然后 在 headerjs 中 定义 Vue 组 件 ， 代 码 示例 如 下 : 


module.exports = Vue.extend ({ 


template: ^ inline('header.tpl'), 
data: function () { 
return { 


applink: 'http://d.xiaojukeji.com/c/71444' 


F 


这 里 我 们 借用 了 FIS A inline 方法 把 header.tpl IJ Pj AA FJ header.js P, 经 过 Scrat 编译 
后 就 变 成 了 如 下 代码 : 


define('components/header/header.js', function(require, exports, module) { 


T 


module.exports = Vue.extend ({ 


template: "<div class=\"header\">\n <div class=\"logo\"></div>\n <div 
class=\"download\">\n «a :href=\"applink\"> 下 载 APP</a>\n </div>\n</div>", 


data: function () { 
return { 


applink: 'http://d.xiaojukeji.com/c/71444' 


小 


在 其 他 组 件 


new Vue ({ 


这 个 组 件 可 以 这 样 写 ， 代 码 示例 如 下 : 


el: '#main', 
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template: ^ inline('home.tpl'), 


components: { 


'v-header': require('header') 


// 借助 模块 化 使 
} 


在 Scrat : 


最 后 ， 在 home.tpl 中 就 可 以 通关 


上 面 简单 介绍 了 如 何在 Scrat ' 
下 Scrat 和 Vue.js 是 如 何 配 合 使 用 的 。 


17.5 “案例 分 析 


我 们 需要 做 quu om 


通过 require(header) 可 以 自动 加 载 组 件 依赖 的 同名 的 样式 文人 
过 <v-header></v-header> 来 展现 组 件 了 。 


定义 一 个 Vue 组 件 ， 


组 件 并 注册 


牛 (CSS 、stylus) 等 。 


接 下 来 我 们 通过 一 个 完整 


多 的 案例 看 一 


可 变 的， 共有 等 待 接 芍 
改变 ， JI [H 


、 行 程 中 、 和 
的 展示 也 随 之 发 生变 f 


JJ Bsp 


DDFERJHL E 


e" 司机 B: 
7 DDFE 私 家 车 ” 京 DDFE123 


i 等 待 接 驾 行程 中 
ter Cees: T 
sided — SAE 
sume 
2 NE Ta 
3 
ax- 
STERA 
SLR RFR 
id iil AERIS Ge 
故宫 博物 院 
tagd, 
历史 档 馆 
u-z p 
图 17-4 等 待 接 驾 、 行 程 中 、 行 程 结束 效果 图 
我 们 拿 到 这 样 一 


DOM 操作 更 新 视图 ， 稍 不 注意 就 会 出 
这 样 的 需求 就 很 轻松 了 。 下 


看 我 们 详细 介 


# 面 ， 页 面 中 有 司机 信息 、 订 单 信息 、 地 图 等 内 容 。 
行程 结束 、 行 程 取 消 、 行 程 过 
， 如 图 17-4、 图 17-5、 图 17-6 Pra. 


个 需求 ， 如 果 不 用 Vue.jjs， 那 么 会 在 


会 出 错 ， 这 个 过 程 是 很 痛苦 的 


订单 状态 是 
期 5 种 状态 ， 随 着 订单 状态 的 


y BB 
"^ DDFERMA 四 
DDFE 私 家 车 — JXDDFE123 
o 北京 南 站 
o 北京 北 站 


该 行程 已 取消 


Ka 


17-5 ”行程 取消 效果 图 


^F JavaScript 中 写 大 量 的 状态 判断 逻辑 和 
。 然 而 ， 我 们 使 用 Vue.js， 实 现 


绍 如 何 用 Scrat+Vue.js 开发 这 个 项 目 。 
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17.5.1 准备 工作 


1. Z% Scrat 
在 命令 行 执行 如 下 命令 : 


$ npm install -g scrat 


滴 滴 出 行 
ETT 


该 行程 已 于 24 小 时 前 结束 


安装 后 执行 scrat -v， 查 看 


图 17-6 ”行程 过 期 效果 图 


N 


版 本 ， 如 图 17-7 所 示 。 


/HH/-. 


~.:+SS0/-、 
.+SSSOO+//:-、 
:0sssso//: :~ 


图 17-7 查看 Scrat 版 本 
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WIR RAM, FY A Se E RRK: 


$ npm install -9 cnpm --registry-https://registry.npm.taobao.org 


$ cnpm install -9 scrat 


2， 初 始 化 项 目 


Scrat 自 带 脚手架 功能 , 通过 执行 scrat init 命令 生成 一 个 Scrat 脚手架 项 目 , 如 图 17-8 所 示 。 


图 17-8 Scrat FAE 


生成 的 目录 结构 如 下 : 
vue-scrat-demo 
-components ( 模块 化 资源 ) 
- server (服务 端 代 码 ) 
- views 〈 非 模块 化 资源 ) 
- component .json (模块 化 资源 描述 文件 ) 
- fis-conf.js (构建 工具 配置 文件 ) 
- package.json (项 目 描述 文件 ) 


3. 安装 依赖 组 件 库 

Scrat 采用 component 作为 生态 模块 ， 因 此 可 以 通过 安装 component 组 件 ， 方 便 开 发 和 团队 
共享 。 打开 component.json 文件 ， 修 改 依 赖 关 系 ， 如 下 所 示 : 
{ 


"name": "scrat-vue", 


"version": "1.0.0", 
"dependencies": { 


"scrat-team/fastclick": "1.0.2" 


生态 模块 名 称 的 结构 是 “用 户 名 /仓库 名 @ 版 本 号 ” 这 里 的 fastclick 是 一 个 JavaScript FE, 
| github 用 户 scrat-team 创建 的 ， 版 本 是 1.0.2。 接 下 来 我 们 在 项 目 目录 下 执行 scrat install 命 
， 如 图 17-9 所 示 。 


oc 
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图 17-9 Scrat 安装 依赖 的 生态 模块 


依赖 的 fastclick 库 会 安装 到 当前 项 目 中 ， 目 录 结 构 如 下 : 


vue-scrat-demo 


|- component modules 
|- scrat-team-fastclick 
[71:072 
|- component.json 
|- fastclick.js 
| -components 


[Eu 
模块 安装 后 ， 我 们 就 可 以 在 JavaScript 代码 中 通过 require('fastclick") 来 引用 这 个 模块 了 。 


17.5.2 ”代码 实现 


1. 组件 拆 分 
在 做 好 准备 工作 后 ， 开 始 正式 编写 代码 前 ， 我 们 可 以 依据 功能 需求 ， 把 页 面 拆 分 成 一 个 个 
组 件 ， 如 图 17-10、 图 17-11、 图 17-12 所 示 。 
WAHT 。 “header 组 件 滴 滴 出 行 
w SOIERSI, BS order 组 件 * loses 
$ DDFE 私 家 车 “” 京 DDFE123 o DDFE 私 家 车 | 京 DDFE123 
9 北京 南 站 o 北京 南 站 
北京 北 站 o 北京 北 站 
景山 前 省 Fil A 
2%) 宣 仁 庙 
cancel 组 件 
o 天 一 门 
«deti. 
mapt 
tat MASE Ita a 
故 官 博物 院 该 行程 已 取消 
pas 
BERTE 
(a EA — it 
图 17-10 组 件 拆 分 (header、order、map 组 件 ) 图 17-11 组 件 拆 分 (cancel 组 件 ) 
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ymmu 


交行 程 已 于 24 小 时 前 结束 
保护 用 户 隐私 ， 不 看 


expired 组 件 


项 


17-12. 组件 拆 分 〈expired 组 件 ) 


我 们 把 页 面 按 功 能 拆 分 成 多 个 组 件 后 ， 很 自然 就 可 以 梳理 出 组 件 目录 结构 (页 面 本 身 也 可 
以 看 成 一 个 组 件 一 一 home 组 件 )， 如 下 所 示 : 


|- vue-scrat-demo 


|- component modules 〈 模 块 生 态 资 源 ) 


|- components 
- cancel 〈 行 程 取 消 组 件 ) 
- common (Ad js. stylus. image. font 资源 ) 
- expired 〈 行 程 过 期 组 件 ) 
- header 〈 头 部 组 件 ) 
- home (页 面 组 件 ) 
- map (地 图 组 件 ) 
- order (订单 组 件 ) 
|- order.js (订单 组 件 js) 
|- order.styl (订单 组 件 stylus) 
|- order.tpl (订单 组 件 模 板 ) 
|- views 
|- lib (scrat.js. vue.js. normalize.css 等 非 模块 化 资源 ) 
|- index.html (入 口 页 面 ) 
|- server Cl 530539 48.) 
|- fis.conf (构建 工具 配置 文件 ) 


2 
页 面 入 口 为 index.html， 引 入 了 libjs (包括 scratjs 和 Vuejs). HP, scrat.js 是 Scrat 开发 
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体系 的 模块 化 框架 , 它 与 Serat 构建 工具 紧密 结合 , 实现 了 JavaScript/CSS 依赖 管理 、 请 求 合 并 、 
按 需 加 载 、 本 地 缓存 等 功能 。 同 时 ， 引 入 了 Vue.js， 我 们 可 以 全 局 使 用 Vue KR. 


页 面 是 基于 JavaScript 泻 染 的 ， 代 码 示例 如 下 : 


<script> 


require.config( FRAMEWORK CONFIG ); 
require.async(['home', 'fastclick'], function (home, fastclick) { 
fastclick(document.body); 
home.render (document.body); 
)); 
«/script» 


其 中 ， | FRAMEWORK CONFIG 这 个 全 局 宏 会 在 项 目 构建 时 被 替换 成 一 个 对 象 〈 包 
模块 描述 、 依 赖 关 系 、 其 他 参数 等 )。Scrat 通过 require.config 接口 知道 了 所 有 依赖 关系 ， 因 此 
在 require.async 加 载 模块 时 ， 可 以 找到 依赖 的 所 有 JavaScript. CSS 模块 并 加 载 。 当 全 部 请 求 
载 完成 后 触发 callback 函数 。 


7 


页 面 演 染 主 要 就 是 通过 home 组 件 的 render 方法 实现 的 , 接 下 来 我 们 看 一 下 home 组 件 的 实 


现 。 


3. home 组 件 的 实现 


home 组 件 通过 render 方法 泻 染 页 面 主 框架 ， 代 码 示 例如 下 : 


/ 
* 泻 染 页 面 骨 架 
* @param dom 
"f 
exports.render = function (selector) { 
new Vue ({ 
el: selector, 
replace: false, 
template: — inline('home.tpl'), 
data: { 
orderInfo: { 
orderStatus: 0, 
fromAddress: ' 北 京 南 站 '， 
toAddress: ' 北 京北 站 '， 
getOnTime: 1464624221, 
getOffTime: 1464684221 
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), 
driverInfo: { 
name: 'DDFE 司机 '， 
score: 5, 


car: 'DDFE 私家 车 ' ， 


plate: ' 京 DDFE123', 


avatar: 'https://avatars3.githubusercontent.com/u/5359011 ' 


), 
events: { 
'order.change': function (orderInfo) { 
this.orderInfo = orderInfo; 
this.$broadcast('order.change', orderInfo); 
} 
), 
components: { 
'v-header': require('header'), 
'v-order': require('order'), 
'v-map': require('map'), 
'v-cancel': require('cancel'), 


'v-expired': require('expired') 


我 们 通过 new Vue 创建 了 一 个 Vue 实例 , 并 把 它 挂 载 在 selector 对 象 上 。 由 于 传 入 的 selector 
是 document.body， 因 此 replace 属性 值 要 设置 为 false。 这 里 的 template 通过 FIS 特有 的 _inline 
方法 把 home.tpl HI ARAIRE] home.js 中 ， 从 而 实现 了 模板 与 JavaScript 文件 分 离 。 在 data 属性 
中 我 们 mock 了 一 些 数据 ， 作 为 模板 的 数据 源 。 在 events 属性 中 我 们 监听 了 orderchange 事件 ， 
该 事件 是 由 order 组 件 派 发 的 ，home 组 件 接收 后 ， 广 播 给 其 他 子 组 件 。Components 中 描述 了 
home 组 件 包含 的 所 有 子 组 件 ， 可 以 看 到 ， 所 有 子 组 件 都 可 以 通过 'vV-xxx': require(xxx) 方 式 加 载 
并 局 部 注册 ， 这 样 我 们 就 可 以 在 模板 中 通过 <v-xxx></v-xxx> 来 使 用 了 。 


linl 


Ma 


TT 


za 


接 下 来 我 们 看 一 下 home.tpl 的 实现 ， 代 码 示例 如 下 : 
<v-header></v-header> 
<div class-"container"» 


<v-order v-show-"orderInfo.orderStatus!--4" 


:driver-info-"driverInfo" :order- info= 
"orderInfo"></v-order> 


«v-map v-show="orderInfo.orderStatus<3"></v-map> 
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«v-cancel v-show-"orderInfo.orderStatus---3"»«/v-cancel» 
<v-expired v-show-"orderInfo.orderStatus---4"»«/v-expired» 


«/div» 

在 模板 中 , 我 们 通过 v-show 指令 结合 订单 状态 字段 orderInfo.orderStatus 来 判断 隐藏 或 者 显 
示 不 同 的 组 件 . 这 就 是 Vuejs 带 给 我 们 的 福利 ,不 需要 在 JavaScript 中 写 烦 琐 的 判断 逻辑 和 DOM 
操作 ， 只 需要 在 模板 中 通过 一 些 指令 和 判断 条 件 ， 就 能 实现 根据 不 同 的 状态 泻 染 不 同 的 视图 。 
这 样 不 容易 出 错 ， 极 大 地 提升 了 研发 效率 。 


可 以 看 到 ， 我 们 通过 v-bind 指令 的 简写 方式 :driver-info 和 :order-info 把 data 中 定义 的 
driverInfo 和 orderInfo 数据 传递 给 order 组 件 的 props。 接 下 来 我 们 看 一 下 order 组 件 的 实现 。 


4. order 组 件 的 实现 
order 组 件 作 为 home 组 件 的 子 组 件 ， 代 码 示例 如 下 : 


var api = require('common/js/api'); 


module.exports = Vue.extend ({ 
template: ^ inline('order.tpl'), 
props: ['driver-info', 'order-info'], 
created: function () { 
this.fetchOrderData(); 
), 
methods: { 
fetchOrderData: function () { 
var me = this; 
api.getOrderInfo(function (orderInfo) { 
if (me.orderInfo.orderStatus !-- orderInfo.orderStatus) { 
me.orderInfo - orderInfo; 
me.$dispatch('order.change', orderInfo); 
} 
setTimeout (function () { 
me.fetchOrderData(); 
), 5000); 


我 们 通过 Vue.extend 方法 创建 一 个 组 件 的 构造 器 ， 并 作为 模块 导出 。 这 样 在 home 组 件 中 
就 可 以 通过 require('order") 加 载 这 个 构造 器 ， 并 把 它 当 作 Vue 实例 的 components 属性 完成 局 部 


284 ”Vue.js 权威 指南 


注册 。 template 依旧 通过 FIS If] — inline 方法 加 载 order.tpl MAA. props 可 以 接收 父 组 件 传递 的 
数据 。created 为 Vue 实例 生命 周期 中 的 一 部 分 ， 在 Vue 实例 化 时 调用 。 我 们 通过 在 methods 中 
定义 的 fetchOrderData 方法 加 载 订单 数据 ， 这 里 的 数据 都 是 mock 的 ， 每 5s 请 求 一 次 。 下 面 简 
单 看 一 下 服务 端 mock 部 分 ， 代 码 示例 如 下 : 


var status = 0; 


app.get('/orderInfo', function (req, res, next) { 

res.send({ 
orderStatus: status, 
fromAddress: ' 北 京 南 站 '， 
toAddress: ' 北 京北 站 '， 
getOnTime: 1464624221, 
getOffTime: 1464684221 

)); 

if (status < 4) { 
statustt; 

j else 4 


status - 0; 


服务 端 采 用 的 是 node 的 Express 框架 。 当 然 ， 采 用 其 他 后 端 语言 也 是 可 以 的 ， 这 本 身 就 是 
一 个 前 后 端 分 离 的 项 目 ， 在 这 里 只 是 mock 数据 。 可 以 看 到 ， 服 务 端 返 回 的 数据 每 次 orderStatus 
都 会 不 一 样 ， 当 order 组 件 接收 到 不 一 样 的 orderStatus 时 ， 会 通过 $dispatch 方法 派发 这 个 
orderchange 事件 给 它 的 父 组 件 。home 组 件 会 接收 到 这 个 事件 ， 更 新 自己 的 orderStatus， 同 时 
自身 的 视图 也 会 根据 orderStatus 的 改变 自动 刷新 。home 组 件 还 会 广播 这 个 事件 ,所 有 监听 这 个 
事件 的 子 组 件 都 可 以 收 到 并 做 相应 的 处 理 。 


接 下 来 还 有 map. cancel. expired 组 件 等 ， 它 们 的 代码 和 order 组 件 大 同 小 异 ， 限 于 篇 幅 这 
里 就 不 一 一 介绍 了 。 


17.5.3 ”编译 和 发 布 


项 目 代 码 开 发 完成 后 ， 需 要 编译 和 发 布 。 在 Scrat 中 ， 在 项 目 目 录 下 执行 scrat release 命令 ， 
即 可 对 项 目 进行 构建 ， 并 将 构建 结果 发 布 到 本 地 调试 目录 下 ， 如 图 17-13 所 示 。 
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图 17-13 


构建 工具 常见 的 功能 就 是 区 分 构建 目的 ， 


Scrat 构 建 项 


比如 开发 构建 、 测 试 构建 


4 


F 线 构建 等 。 


Scrat 并 


不 像 grunt 或 者 gulp 那样 定义 不 同 的 task 来 区 分 构建 目的 ， 而 是 通过 release 命令 的 多 种 参数 组 


合 来 确定 构建 目的 。 


scrat release 命令 的 所 有 参数 都 可 以 通过 serat release -h 命令 来 查看 ， 其 


Q --dest <paths> 一 一 指定 构建 结果 的 发 布 路 径 。 


O -md5 一 一 是 否 给 非 模块 化 资源 添加 MDS ER- 
O --domains 一 一 是 否 给 静态 资源 添加 域名 。 

O -lit 一 一 是 否 开 启 代 码 校 验 。 

Q -optimize 一 一 是 否 开启 代码 压缩 。 

O --watch 一 一 是 否 开 启 文 件 监听 。 

Q 


-live 一 一 是 否 开局 浏览 器 自动 刷新 。 


常见 的 包括 : 


scrat release 命令 的 所 有 参数 均 可 自由 组 合 ， 通 过 不 同 参数 的 不 同 组 合 即 可 得 到 不 同 的 开发 


状态 ， 参 数 顺序 没有 影响 。 


本 项 目 执行 scrat release 命令 后 ， 执 行 scrat server open 


图 17-14 所 示 。 


可 以 打 


本 地 调试 目 


录 ， 如 


图 17-14 ”Scrat 打 开本 地 调试 目录 


编译 后 生成 的 调试 目录 结构 如 下 ， 我 们 习 


点 看 一 下 public 目录 。 
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|- www 
|-server 《〈 后 端 代码 逻辑 ) 
1-public 《生成 的 静态 资源 目录 ) 


Fee 


|^ scrat-team-fastclick 
1-1.0.2 
|-fastclick.js 


|- scrat-vue 


|-1.0.0 
|^ cancel 
|- common 
|- expired 
|- header 
|- home 
|- map 
|- order 


|- order.css 

|- order.css.js 

|- order.js 

|^ scrat-vue 

|- 1.0.0 

|- lib 
|- index.html 

| -views (模板 目录 ) 
L2 s 


我 们 可 以 看 到 ， 编 译 后 的 静 


多 的 功能 。 这 块 内 容 可 以 参阅 FIS 官网 Chttp://fis.baidu.com/), 3X 


项 目 编译 后 ， 可 以 执行 scrat server start íi H 


源 分 为 c 目录 (模块 化 资源 目录 ) 和 scrat-vue WH Ho c 


目录 又 按 项 目 名 称 和 版 本 号 划分 为 不 同 的 子 目录 ， 这 种 部 署 规则 5 
版 本 都 可 以 增 量 发 布 而 不 会 有 人 


J 以 保证 不 同 的 项 目 、 不 同 的 
P, RAHET UJE public 目录 的 所 有 资源 


EES] CDN 的 回 源 机 器 ,同时 修改 fis-confjs 中 的 静态 资源 域名 , 在 编译 ; 


| scrat release 


的 domains 参数 在 静态 资源 URL 前 添加 域名 。 我 们 还 可 以 通过 修改 fis-confjs 的 


配置 来 实现 更 


F 启 本 地 node 服务 器 ， 如 


就 不 再 费 述 了 。 


图 17-15 所 示 。 
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图 17-15” ”Scrat 开启 本 地 node 服 务 器 
最 后 ， 在 浏览 器 中 输入 localhost:5000， 可 以 预览 效果 ， 至此， 整个 项 目的 开发 和 部 署 完成 。 
17.6 “总结 


Vue.js 的 设计 思想 是 专注 而 灵活 ， 它 只 聚焦 
我 们 采用 Vuejs 构建 一 些 大 型 应 用 
E ABS 


[ 程 化 方 


u 


特别 棒 。Scrat 和 Vue.js Æ 4 


产生 的 化 学 反应 是 美妙 的 ， 它 们 必 将 成 为 


视图 层 ， 响 应 的 数据 绑 定 和 组 从 
寸 ， 就 不 得 不 考虑 Web 前 端 ] 
日 件 化 开发 思想 上 不 谋 而 合 ， 相 得 
发 大 型 项 目的 利器 。 


245 202 


fnb, 


系统 是 其 特色 。 当 
[ 程 化 的 一 些 事情 了 ， 而 Scrat 在 


Scratt Vue.js 


第 18 x 


Vue.js 2.0 


Vue.js 2.0 preview 版 本 于 2016 年 4 月 底 发 布 ， 相 对 于 Lx 版 本 ，Vue.js 2.0 做 了 不 少 的 改进 
和 优化 。 除 了 部 分 API 变更 、 模 板 更 加 灵活 之 外 ， 最 吸引 人 的 恐怕 就 是 高 性 能 的 Virtual DOM 
和 流 式 服务 端 泻 染 功 能 了 。 接 下 来 就 让 我 们 一 起 走 进 Vue.js 2.0 的 世界 ， 看 一 看 Vuejs 2.0 给 我 
们 带 来 了 哪些 惊喜 。 


18.1 APIS 


对 于 所 有 框架 / 库 做 大 版 本 的 更 新 ,开发 者 最 关心 的 就 是 API 与 之 前 版 本 的 兼容 程度 。 虽 然 
Vue.js 2.0 用 ES 6+flow 对 整个 项 目 进 行 了 重 写 ， 但 作者 表示 除了 一 些 有 意 废 弃 掉 的 功能 ，API 
和 Lx 是 大 部 分 兼容 的 。 部 分 功能 的 废弃 ， 本 质 上 是 为 了 提供 更 简洁 的 API 而 减少 开发 者 对 框 
架 的 理解 和 学 习 成 本 ， 从 而 提高 开发 者 的 效率 。 下 面 让 我 们 一 起 来 看 看 哪些 API 发 生 了 变化 。 


18.1.1 全 局 配置 


O 新 增 Vue.config.errorHandler 


Vue.js 2.0 新 增 了 config.errorHandler， 它 是 一 个 全 局 钩子 函数 。 当 组 件 泻 染 时 遇 到 未 处 理 的 
异常 ， 会 调用 这 个 函数 ， 默 认 会 输出 错误 堆栈 信息 。 


O 新 增 Vue.config.keyCodes 


Vue.js 2.0 新 增 了 config.keyCodes, 它 提供 了 对 von 指令 按键 修饰 符 自 定义 key 别名 的 配置 。 


O 废弃 Vue.config.debug 


在 Vue.js l.x 版 本 中 ， 如 果 config.debug 设置 成 true， 则 在 开发 版 本 中 为 所 有 的 警告 打印 栈 
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追踪 信息 。Vue.js 2.0 新 增 了 errorHandler 全 局 钩子 函数 ， 可 以 通过 它 输出 错误 堆栈 信息 ， 所 以 
config.debug 被 废弃 。 


O 废弃 Vue.config.async 


在 Vue.js 1.x 版 本 中 ，config.async 表示 异步 模式 ， 默 认 值 为 ttue， 如 果 关 闭 异步 模式 ，Vue 
检测 到 数据 变化 时 会 同步 更 新 DOM., 这 样 虽然 方便 了 调试 , 但 会 导致 性 能 下 降 , 并 影响 Watcher 
的 回调 顺序 ， 在 生产 环境 下 是 不 建议 使 用 的 。Vue.js 2.0 采用 了 Virtual DOM 的 方式 ， 它 的 演 染 
方式 必须 是 异步 的 ， 因 此 废弃 了 config.async 这 个 配置 。 


O 废弃 Vue.config.delimeters 


在 Vue.js 1.x 版 本 中 ,config.delimeters 代表 文本 插值 的 界定 符 , 是 一 个 全 局 配置 ,而 在 Vue.js 
2.0 中 ， 该 配置 从 全 局 配置 中 移 除 ， 变 成 一 个 组 件 级 别 的 配置 。 


O 废弃 Vue.config.unsafeDelimeters 


TE Vue.js 1.x 版 本 中 ，config.unsafeDelimeters 代表 原生 HTML 插值 的 界定 符 。Vue.js 2.0 J£ 
弃 了 该 配置 ， 用 v-html 指令 替代 该 功能 。 


18.1.2 全 局 API 
O 新 增 Vue.compile 


Vue.js 2.0 新 增 了 Vue.compile 全 局 API， 它 的 功能 是 把 一 个 Vue 实例 的 模板 字符 串 编译 成 


render function. 


O 废弃 Vue.transition 的 stagger 


1E Vue.js 1.x 版 本 中 ， 当 transition 和 v-for 一 起 使 用 时 可 以 通过 stagger 创建 渐进 过 渡 效 果 。 
Vue.js 2.0 废弃 了 该 接口 ， 可 以 在 遍历 时 给 每 个 元 素 设 置 data-index 属性 ， 然 后 通过 在 JavaScript 
中 访问 该 属性 实现 类 似 的 效果 。 


O 废弃 Vue.elementDirective 


在 Vue.js 1.x 版 本 中 ，Vue.elementDirective 的 功能 是 定义 全 局 元 素 指 令 ， 元 素 指 令 的 本 意 是 
像 AngularJS 的 卫 指令 那样 定义 一 个 自 定 义 元 素 ， 它 可 以 被 看 成 是 一 个 轻 量 组 件 。 但 是 ， 这 是 
一 个 鸡肋 功能 , Vue.js 本 身 就 有 一 套 很 好 的 组 件 化 开发 机 制 ( 这 点 和 AngularJS 不 同 ), 所 以 Vue.js 
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2.0 废弃 了 该 API， 可 以 通过 component 来 实现 。 


O 废弃 Vue.partial 


1E Vuejs 1.x 版 本 中 ，Vue.partial 的 功能 是 注册 或 获取 全 局 的 partial。partial 是 一 种 特殊 元 
素 , 它 可 动态 地 插入 一 小 段 模板 , 在 插入 时 被 Vue 编译 。 但 由 于 它 的 功能 完全 可 以 通过 functional 


的 component 实现 ， 因 此 在 Vue.js 2.0 中 被 废弃 。 


18.1.3. VM 选项 


1， 数 据 部 分 
O 废弃 props.coorce 


在 Vue.js 1.x 版 本 中 ，props.coorce 是 属性 转换 函数 ， 它 的 功能 是 把 传 入 的 属性 


E 值 通过 一 个 


函数 进行 转换 。 不 过 它 的 功能 也 可 以 通过 设置 计算 属性 来 实现 ， 因 此 在 Vue.js 2.0 中 被 废弃 。 


O 废弃 prop binding modes 


在 Vuejs l.x 版 本 中 ， 我 们 可 以 使 用 .sync、.once 绑 定 修饰 符 设 置 属性 的 绑 定 模式 为 双向 或 


基于 该 prop 值 的 data 属性 或 者 computed 属性 替代 。 
2. DOM 部 分 


O ”新 增 render 


Vue.js 2.0 新 增 了 render 字段 ，render 字段 是 一 个 function， 运 行 时 会 二 


者 单 次 绑 定 。Vue.js 2.0 废弃 了 这 些 模式 ， 属 性 只 能 够 单 向 传递 ， 如 果子 组 件 想 影 响 父 组 件 ， 则 
必须 通过 事件 派发 的 方法 ， 这 样 做 的 好 处 是 降低 了 子 组 件 和 父 组 件 的 耦合 。 在 Vue.js 2.0 中 ,我 
们 应 该 把 prop 看 作 是 immutable 的 , 不 建议 直接 修改 prop, MA T REM prop 的 场景 都 可 以 用 


BU 


的 内 容 经 过 


Vue 的 编译 ， 转 换 成 泻 染 方法 存 入 render 字段 ， 然 后 再 执行 。 如 果 发 现 render 字段 已 经 存在 
PpP 写 一 个 模板 和 写 一 个 render function 是 等 


则 跳 过 模板 解析 过 程 直 接 泻 染 。 因 此 ， 在 Vue.js 2.0 4 
价 的 。 


O 废弃 replace 


在 Vue.js l.x 版 本 中 ， 我 们 可 以 通过 replace 属性 来 决定 是 否 用 模板 替换 提 


是 true， 模 板 将 履 盖 挂 载 元 素 ，Vue.js 2.0 废弃 了 该 属性 并 且 规 定 组 件 必 须 有 确 
将 挂 载 到 这 个 根 元 素 上 并 才 盖 。 因 此 ， 在 Vue.js 2.0 中 不 能 把 Vue 实例 挂 载 在 document.body 上 。 


E 载 元 素 ， 默 认 值 
切 的 根 元 素 ， 模 板 
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3， 资 源 部 分 
O JRF partials 


在 Vue.js 1.x 版 本 中 , partials 是 一 个 包含 模板 字符 串 的 对 象 。 它 的 功能 可 以 通过 components 
对 象 实现 ， 因 此 在 Vue.js 2.0 中 被 废弃 。 


O 废弃 elementDirective 


在 Vuejs 1.x 版 本 中 ，elementDirective 是 一 个 包含 元 素 指令 的 对 象 。 它 的 功能 可 以 通过 
functional 的 components 实现 ， 因 此 在 Vue.js 2.0 中 被 废弃 。 


4. 杂项 部 分 
O 新 增 delimiters 


TE Vue.js 1.x RAH, delimiters 是 文本 插值 的 界定 符 ， 它 是 一 个 全 局 的 配置 选项 。 在 Vue.js 
2.0 中 ，delimiters 作为 Vue 实例 的 一 个 属性 ， 只 独立 作用 于 当前 Vue 实例 的 编译 过 程 。 


O 新 增 functional 


在 Vue.js 1.x 版 本 中 , 我们 可 以 通过 partial 这 种 特殊 元 素 创建 一 个 模板 , 它 通常 是 无 状态 的 。 
Vue.js 2.0 废弃 了 partial， 我 们 可 以 创建 一 个 functional 的 component 来 奉 代 它 ， 仅 仅 通 过 一 个 
render function 来 创建 Virtual DOM. 


O 废弃 events 


在 Vue.js 1.x 版 本 中 ， 组 件 的 自 定义 事件 监听 都 是 通过 这 个 属性 设置 的 。 在 Vuejs 2.0 中 ， 
组 件 的 事件 派发 和 广播 被 废弃 ， 因 为 考虑 到 组 件 树 可 能 层级 很 深 、 兄 弟 组 件 的 通信 问题 。 我 们 
可 以 通过 全 局 事件 管理 中 心 来 解决 这 些 问题 。 

5， 生 命 期 钩子 函数 部 分 

在 Vue.js 2.0 P, Vue 实例 的 生命 周期 发 生 了 一 些 变化 ， 如 网 18-1 所 示 。 


O 新 增 beforeMount 


Vue.js 2.0 新 增 了 beforeMount 钩子 函数 ， 它 的 调用 时 机 是 在 模板 编译 成 render 方法 之 后 、 
创建 Watcher 之 前 。 


O 新 增 mounted 


Vue.js 2.0 新 增 了 mounted 钩子 函数 ， 它 的 调用 时 机 古 在 DOM 树 生成 之 后 。 


Vue.js 权威 指南 


Observe 
Data 
IE 
vm.$mount(el) 


has ‘render’ 
option? 


has ‘el’ 
option? 


has ‘template’ 
option? 


get template 


compile to 
render 
function 


has data create 
change? watcher 


create 
Virtual 
DOM 


-has mounted- — —| 


create 
DOM Tree 


|4— — -has mounted- — — 


teardown data 
bindings, child 


components and 
event listeners 


destroyed 


/ 


图 18-1 Vue.js 2.0 生 命 周 


期 图 示 
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O ”新 增 beforeUpdate 


Vue.js 2.0 新 增 了 beforeUpdate 钩子 函数 ,， 它 的 调用 时 机 是 在 Virtual DOM 生成 之 后 、DOM 
树 生成 之 前 ， 调 用 条 件 是 这 个 vm 实例 已 经 mounted 过 。 


O 新 增 update 


Vue.js 2.0 新 增 了 update FF PAB EMT IN DLE DOM 树 生成 之 后 ， 调 用 条 件 是 这 个 


vm 实例 已 经 mounted 过 。 


O 新 增 activated 


Vues 2.0 新 增 了 activated 钩子 函数 ， 它 的 调用 时 机 是 在 DOM 树 生成 之 后 ， 调 用 条 件 是 
keep-alive 组 件 。 


O 新 增 deactivated 


Vue.js 2.0 新 增 了 deactivated 钩子 函数 ， 它 的 调用 时 机 是 在 Vue 实例 销毁 时 ， 调 用 条 件 是 
keep-alive 组 件 。 


O JRF ready 

在 Vue.js 1.x RAH, ready 钩子 函数 的 调用 时 机 是 第 一 次 插入 DOM Ja. Vue.js 2.0 并 不 一 
定 执行 在 浏览 器 环境 中 ， 也 可 能 是 在 服务 端 泻 染 ， 因 此 废弃 了 该 钧 子 函数 并 用 mounted 钩子 函 
ROK 


O 废弃 beforeCompile 


在 Vue.js 1.x 版 本 中 ，beforeCompile 钩子 函数 的 调用 时 机 是 在 模板 编译 前 。Vuejjs 2.0 废弃 
了 该 钩子 函数 并 用 created 钩子 函数 替代 。 


O 废弃 compiled 


在 Vuejs 1.x 版 本 中 compiled 钩子 函数 的 调用 时 机 是 在 编译 模板 之 后 、DOM 创建 之 前 。 
Vue.js 2.0 废弃 了 该 钩子 函数 并 用 mounted 钩子 函数 替代 。 


O 废弃 attached 


在 Vue.js 1.x 版 本 中 attached 钩子 函数 的 调用 时 机 是 插入 DOM 时 。 Vue.js 2.0 不 一 定 会 创建 
真实 的 DOM， 因 此 废弃 了 该 钩子 。 
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O 废弃 detached 


在 Vue.js 1.x 版 本 中 ，attached HF ERUIT] Hl FIN DLE BR DOM 时 ， 废 弃 理 由 同上 。 
18.1.4 实例 属性 


O JEF vm.$els 


在 Vue.js 1.x 版 本 中 , vm.$els 表示 一 个 注册 有 v-el DOM 元 素 的 对 象 , 可 以 通过 它 访 问 到 组 
件 中 的 DOM 对 象 。Vue.js 2.0 废弃 了 该 属性 ， 把 该 功能 合并 到 vm.$refs 中 。 


18.1.5 ”实例 方法 


1， 数 据 相 关 
O 废弃 vm.$get 


TE Vue.js 1.x 版 本 中 ，vm.$get 的 功能 是 从 Vue 实例 获取 指定 的 表达 式 的 值 。Vue.js 2.0 废弃 
了 此 方法 ， 建 议 直 接 从 Javascript 对 象 中 取 值 。 


O 废弃 Vue.set 


在 Vue.js 1.x 版 本 中 ，vm.$set 的 功能 是 设置 Vue 实例 的 属性 值 。Vue.js 2.0 废弃 了 此 方法 ， 
可 以 用 全 局 API Vue.set 替代 。 


O 废弃 Vue.delete 


在 Vue.js 1.x 版 本 中 , vm.$delete 的 功能 是 删除 Vue 实例 (以 及 $data) 上 的 顶级 属性 。Vue.js 
2.0 废弃 了 此 方法 ， 可 以 用 全 局 API Vue.delete 替代 。 


O JRF vm.$eval 


在 Vue.js 1.x 版 本 中 ,vm.$eval 的 功能 是 计算 当前 实例 上 的 合法 绑 定 表达 式 , 可 包含 过 滤器 ， 
该 功能 也 可 以 通过 computed 属性 实现 ， 实 际 上 很 少 使 用 。 在 Vuejs 2.0 中 被 废弃 。 


O 废弃 vm.Sinterpolate 


在 Vue.js 1.x 版 本 中 , vm.$interpolate 的 功能 是 计算 模板 , 该 功能 也 可 以 使 用 computed 属性 
实现 ， 实 际 上 很 少 使 用 。 在 Vue.js 2.0 中 被 废弃 。 
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O 废弃 vm.$log 


在 Vue.js 1.x 版 本 中 ，vm.$log 的 功能 是 打印 当前 实例 数据 。Vue.js 2.0 废弃 了 该 方法 ， 


它 完全 可 以 被 Vue 提供 的 开发 者 工具 替代 。 
2， 事 件 相关 
O 废弃 vm.$dispatch 


>H 
e 


在 Vue.js 1.x 版 本 中 ，vm.$dispatch 是 组 件 派 发 事件 的 方法 ， 它 会 沿 着 父 链 向 上 冒 泡 在 触发 


O 废弃 vm.$broadcast 


第 一 个 监听 器 后 停止 ， 除 非 返回 true. Vue.js 2.0 废弃 了 该 方法 ， 用 全 局 的 事件 或 者 Vuex 替代 。 


在 Vue.js 1.x 版 本 中 ，vm.$broadcast 是 组 件 广播 事件 的 方法 ， 它 会 向 所 有 子 组 件 广播 ， 
条 路 径 上 的 通知 在 触发 一 个 监听 器 后 停止 ， 除 非 返回 tue。Vue.js 2.0 废弃 了 该 方法 ， 用 全 局 的 


事件 或 者 Vuex 替代 。 
3. DOM 相关 
O 废弃 vm.$appendTo 


在 Vue.jsl.x 版 本 中 ,vm.$appendTo 的 功能 是 将 实例 的 DOM 片段 插入 目标 元 素 内 。Vue.js 2.0 
废弃 了 该 方法 ， 可 以 通过 原生 DOM API: appendChild 方法 配合 vm.$el 实现 。 


O 废弃 vm.$before 


1t Vue.jsl.x 版 本 中 ,vm.$before 的 功能 是 将 实例 的 DOM 片段 插入 目标 元 素 的 前 面 。Vue.js 


2.0 废弃 了 该 方法 ， 可 以 通过 原生 DOM API: insertBefore 方法 配合 vm.$el 实现 。 


O 废弃 vm.Safter 


在 Vue.jsl.x 版 本 中 ，vm.$after 的 功能 是 将 实例 的 DOM 片段 插入 目标 元 素 后 面 。Vue.js 2.0 
废弃 了 该 方法 ， 可 以 通过 原生 DOM API: afterChild 方法 和 appendChild 方法 配合 vm.$el 实现 。 


O 废弃 vm.$remove 


TE Vue.jsl.x 版 本 中 , vm.$remove 的 功能 从 DOM 4 


删除 实例 的 DOM 元 素 或 者 片段 Vue.js 


2.0 废弃 了 该 方法 ， 可 以 通过 原生 DOM API: remove 方法 配合 vm.$el 实现 。 
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18.1.6 ”指令 


O 新 增 v-once 指令 


在 Vue.js 2.0 中 ,可 以 给 DOM 元 素 设置 v-once 指令 , 来 表明 该 元 素 是 一 个 静态 根 节 点 ， 这 
些 节点 生成 后 内 容 就 不 会 被 改变 ， 因 此 在 Virtual DOM 的 diff 和 patch 的 过 程 中 , 可 以 忽略 这 些 


节点 来 提升 性 能 。 


O 废弃 Vv-mode 


的 debounce 参数 


在 Vue.js 1.x 版 本 中 ，v-model 指令 主要 用 来 在 表单 控件 元 素 上 创建 双向 数据 绑 定 ， 它 文 持 


debounce 参数 ， 作 


是 针对 input 事件 设置 


个 最 小 延 时 ， 在 每 次 敲 击 之 后 延迟 同步 输入 框 的 


值 与 数据 。 注 意 ，debounce 参数 并 不 会 延迟 input 事件 ， 它 是 延迟 写 入 底层 数据 ， 因 此 在 使 用 
debounce 时 应 当 用 vm.$watchO 响 应 数据 变化 。 由 于 延迟 写 入 底层 数据 , 它 的 状态 更 新 也 会 被 延 
迟 ， 这 样 就 会 带 来 一 些 限制 ， 比 如 不 能 实时 检测 到 数据 的 输入 。Vuejjs 2.0 废弃 了 该 参数 ， 把 延 


人 述 操作 和 Vue 本 身 解 耦 ， 可 以 通过 v-on:input 绑 定 input 事件 ， 并 配合 第 三 方 的 debounce 方法 ， 
这 样 既 可 以 实时 更 新 状态 ， 也 可 以 达到 延迟 input 事件 的 目的 。 


O 废弃 v-ref 指令 


1E Vue.js 1.x 版 本 中 , v-ref 指令 是 在 父 组 


2.0 废弃 了 这 个 指令 ， 


件 


注册 一 个 子 组 件 的 索引 , 便于 直接 访问 。Vue.js 


它 的 功能 用 特殊 的 属性 ref HI. 


O 废弃 v-el 指令 


在 Vue.js 1.x 版 本 中 ，v-el 指令 是 为 DOM 元 素 注 册 一 个 索引 ， 方 便 通 过 所 属实 例 的 $els Vj 


问 这 个 元 素 。Vuejs 2.0 废弃 了 这 个 指令 ， 它 的 功能 合并 到 ref 属性 中 。 


O v-for 指令 修改 


TE Vue.js l.x 版 本 中 ， 可 以 使 用 v-for 指令 基于 数组 泻 染 一 个 列表 。 这 个 指令 使 用 特殊 的 语 


法 ， 形 式 为 item in items, items 是 数据 数组 ，item 是 当前 数组 元 素 的 值 。 在 Vue.js 2.0 中 ， 不 仅 
可 以 遍历 数组 ， 也 可 以 遍历 对 象 。 数 组 的 遍历 语 


各 法 形式 为 value in arr 或 者 (value, index)in arr, 


value 为 当前 数组 元 素 的 值 ，index 为 当前 数组 元 素 的 索引 。 对 象 的 遍历 语法 形式 为 value in obj. 


(value, key)in obj 或 者 (value, key, index)in obj 。 其 
性 名 称 ，index 为 当前 遍历 的 索引 。 因 此 ，Vue.js 2.0 废弃 了 v-for 指令 的 $index 和 $key 语法 。 在 


Vue.js 1.x 版 本 中 ， 可 以 通过 track-by 属性 优化 v-for， 让 Vuejs 尽 可 能 复 用 已 有 的 实例 。 在 Vue.js 


value 为 当前 对 象 元 素 的 值 ，key 为 对 象 的 属 
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2.0 中 ，track-by 属性 用 key 属性 代替 ， 它 的 值 可 以 是 一 个 普通 字符 串 ， 也 可 以 通过 v-bind 动态 
绑 定 。 


18.1.7 ”特殊 元 素 


O JRF partial 元 素 


在 Vue.js 1.x RAH, partial 元 素 的 作用 是 动态 插入 一 个 模板 。Vue.js 2.0 RFT ZNA, 它 
的 功能 可 以 通过 functional 的 component 实现 。 


18.1.8 ARS ima 


服务 端 泻 染 是 Vue.js 2.0 的 新 特性 ， 它 提供 的 接口 如 下 : 


O ”新 增 renderToString(component,done) 方 法 


它 的 功能 是 在 服务 端 把 Vue 组 件 component 演 染 成 DOM 字符 串 , 我们 可 以 在 done 的 回调 
函数 中 拿 到 泻 染 好 的 DOM 字符 串 。 


O 新 增 renderToStream(component) 方 法 


它 的 功能 是 返回 一 个 泻 染 流 ， 是 一 个 可 读 的 stream， 可 以 直接 pipe 到 HTTP Response 中 。 
该 方法 相 比 于 renderToString, “4 App 非常 复杂 时 也 不 会 阻塞 服务 器 的 event loop， 能 够 确保 服 
务 端 的 响应 度 ， 也 能 让 用 户 更 快 地 获得 泻 染 内 容 。 


18.2 Virtual DOM 


18.2.1 认识 Virtual DOM 


现在 简单 回顾 一 下 网 页 开发 的 历程 。 传 统 的 Web 页 面 都 是 简单 的 静态 页 面 加 上 一 些 基 本 的 
DOM 操作 ， 我 们 可 以 使 用 一 些 JavasScript ÆU jQuery 来 方便 开发 。 随 着 Web 应 用 程序 越 来 越 
复杂 ， 程 序 状态 越 来 越 多 ，DOM 操作 的 复杂 度 也 在 提升 ，jQuery 已 经 不 能 满足 我 们 的 开发 需 
求 了 ， 于 是 一 些 MVC. MVVM 框架 被 引入 。 在 MVVM 框架 中 ， 我 们 可 以 通过 数据 绑 定 实现 
视图 和 模型 〈 数 据 ) 的 互动 效果 ， 通 过 双向 绑 定 自动 实现 模型 与 视图 的 同步 更 新 。 但 这 些 仅 仅 
是 从 代码 组 织 方式 来 降低 维护 这 种 复杂 应 用 的 难度 ， 并 没有 从 本 质 上 减少 所 维护 的 状态 ， 也 没 
有 减少 页 面 的 DOM 操作 《框架 替 我 们 做 了 而 已 )。 
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MVVM 框架 可 以 很 好 地 降低 我 们 维护 状态 一 视图 的 复杂 程度 。 但 是 当 页 面 变 得 非常 复杂 
时 ， 视 图 的 更 新 也 可 能 会 引发 大 量 的 DOM 操作 , 产生 一 定 的 性 能 问题 。DOM 是 很 “昂贵 ”的 ， 
我 们 可 以 把 一 个 简单 的 div 元 素 的 属性 都 打印 出 来 ， 如 图 18-2 所 示 。 


» var div 
var str 
for (var key in div){ 

str += key + ' ' 


} 


"align title lang translate dir dataset hidden tabIndex accessKey draggable spellcheck contentEditable isContentEditable 
offsetParent offsetTop offsetLeft offsetWidth offsetHeight style innerText outerText webkitdropzone onabort onblur 
oncancel oncanplay oncanplaythrough onchange onclick onclose oncontextmenu oncuechange ondblclick ondrag ondragend 
ondragenter ondragleave ondragover ondragstart ondrop ondurationchange onemptied onended onerror onfocus oninput 
oninvalid onkeydown onkeypress onkeyup onload onloadeddata onloadedmetadata onloadstart onmousedown onmouseenter 
onmouseleave onmousemove onmouseout onmouseover onmouseup onmousewheel onpause onplay onplaying onprogress onratechange 
onreset onresize onscroll onseeked onseeking onselect onshow onstalled onsubmit onsuspend ontimeupdate ontoggle 
onvolumechange onwaiting click focus blur onautocomplete onautocompleteerror namespaceURI prefix localName tagName id 
className classList attributes innerHTML outerHTML shadowRoot scrollTop scrollLeft scrollWidth scrollHeight clientTop 
clientLeft clientWidth clientHeight onbeforecopy onbeforecut onbeforepaste oncopy oncut onpaste onsearch onselectstart 
onwheel onwebkitfullscreenchange onwebkitfullscreenerror previousElementSibling nextElementSibling children 
firstElementChild lastElementChild childElementCount hasAttributes getAttribute getAttributeNS setAttribute 
setAttributeNS removeAttribute removeAttributeNS hasAttribute hasAttributeNS getAttributeNode getAttributeNodeNS 
setAttributeNode setAttributeNodeNS removeAttributeNode closest matches webkitMatchesSelector getElementsByTagName 
getElementsByTagNameNS getElementsByClassName insertAdjacentElement insertAdjacentText insertAdjacentHTML 
createShadowRoot getDestinationInsertionPoints requestPointerLock getClientRects getBoundingClientRect scrollIntoView 
scrollIntoViewIfNeeded animate remove webkitRequestFullScreen webkitRequestFullscreen querySelector querySelectorAll 
ELEMENT NODE ATTRIBUTE NODE TEXT NODE CDATA SECTION NODE ENTITY REFERENCE NODE ENTITY NODE PROCESSING INSTRUCTION NODE 
COMMENT. NODE DOCUMENT, NODE DOCUMENT. TYPE NODE DOCUMENT FRAGMENT NODE NOTATION NODE DOCUMENT. POSITION DISCONNECTED 
DOCUMENT POSITION PRECEDING DOCUMENT POSITION FOLLOWING DOCUMENT POSITION CONTAINS DOCUMENT POSITION CONTAINED BY 
DOCUMENT POSITION IMPLEMENTATION SPECIFIC nodeType nodeName baseURI isConnected ownerDocument parentNode parentElement 
childNodes firstChild lastChild previousSibling nextSibling nodeValue textContent hasChildNodes normalize cloneNode 
isEqualNode isSameNode compareDocumentPosition contains lookupPrefix lookupNamespaceURI isDefaultNamespace insertBefore 
appendChild replaceChild removeChild addEventListener removeEventListener dispatchEvent " 


T 


document.createElement('div') 
mm 


图 18-2 div 元 素 包 含 的 属 | 


可 以 看 到 ， 真 正 的 DOM 元 素 是 非常 庞大 的 ， 因 为 浏览 器 的 标准 就 把 DOM 设计 得 非常 复 
杂 。 更 糟 的 是 ， 很 多 时 候 我 们 在 调用 DOM API 时 做 得 不 够 好 ， 导 致 更 慢 。 比 如 有 一 个 列表 ， 
代码 示例 如 下 : 


«ul» 


=> 
“LL 


«li»DDFE /z«/li» 
«li»DDFE /H»«/li» 
«li»DDFE 小 S></1i> 


«/ul» 

我 们 想 把 它 变 成 这 样 : 
<ul> 
<1i>DDFE 小 W</1i> 
«li»DDFE 小 J></1i> 
<li>DDFE 小 S></1i> 
<li>DDFE 小 G></1i> 


«/ul» 


通常 的 操作 是 把 前 3 个 二 删除 ,再 添加 4 个 1i, 这 里 面 就 有 3 次 Element 的 删除 ,4 次 Element 
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的 添加 操作 ， 这 当然 也 是 有 优化 空间 的 。 

了 解 到 DOM 的 一 些 浆 端 ， 人 们 就 会 思考 有 没有 什么 方式 可 以 对 DOM 做 优化 。 聪 明 的 人 
提出 了 Virtual DOM 的 概念 ， 它 是 一 种 虚拟 DOM 技术 ， 本 质 上 是 基于 JavaScript 实现 的 。 相 对 
于 DOM 对 象 ，JavaScript 对 象 更 简单 ， 处 理 速 度 更 快 ，DOM 树 的 结构 、 属 性 信息 都 可 以 很 容 
易 地 用 JavaScript 对 象 来 表示 。 代 码 示例 如 下 ; 
var element = ( 

tagName: 'ul', // 节点 标签 名 

props: ( // DOM 的 属性 ， 个 对 象 存储 键 值 对 
ids hast" 

), 

children: [ // 该 节点 的 子 节 点 

(tagName: 'li', props: (class: 'item'), children: ["DDFE Jz), 

(tagName: 'li', props: (class: 'item'), children: ["DDFE 小 H”]}， 

(tagName: 'li', props: (class: 'item'), children: ["DDFE Js"1) 

] 

} 

对 应 的 HTML 写法 是 : 

«ul id-"list"» 
<liclass="item”>DDFE 小 2</1i> 
«li class=”item”>DDFE 小 H></1i> 
<liclass=”item”>DDFE 小 S></1i> 


«/ul» 


我 们 通过 JavaScript 对 象 表示 的 树 
可 以 直接 修改 这 个 JavaScr 
DOM 操作 ， 然 后 将 其 应 用 到 真 ] 


核心 AH S 


IM 


结构 来 构建 
ipt 对 象 ， 接 着 对 比 修改 后 的 JavaScript 对 象 ， 记 录 下 需要 对 页 


ER] DOM 树 ， 实 现 视 图 的 更 新 。 这 个 过 程 就 是 Virtual DOM 的 


FECI 


Elf] DOM 树 , 当 数据 状态 发 生变 化 时 


和 做 的 


18.2.2 Virtual DOM 在 Vue.js 2.0 中 的 实现 


1. 创建 VNode 对 象 模拟 DOM 树 


1E Vue.js 2.0 中 ， 
都 对 应 


组 件 


Virtual DOM 是 通过 VNode Z 
y 一 个 VNode 对 象 。 我 们 先 来 看 一 下 VNode 


类 来 表达 的 ， 


的 数据 结 


每 一 个 原生 DOM 元 素 或 者 Vue 
构 ， 如 图 18-3 所 示 。 
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tag: 


string 


data: VNodeData 
children: Array «VNode» 


text: string 


elm: 


Node 


ns: string 
context: Component 


key: 


string 


componentOptions: VNodeComponentOptions 


child: Component 


VNodeData 


key: string |number 
slot: string 
ref: string 
tag: string 


staticClass: string 

class: any 
style: Array «Object» | Object 
show: boolen 

props: Object 

attrs: Object 

staticAttrs: Object 

hook: Object 

on: Object 

transition: Object 


inlineTemplate: Object 
directives: Array « VNodeDirective > 
keepAlive: boolen 


图 中 不 仅 包 含 了 VNode 
VNodeComponentOptions 等 数据 


结 


(1) VNode 


VNode 用 来 描述 DOM 节点 


parent: VNode 


constructor: Function 
setChildren: Function 


VNodeDirective 


图 


的 数据 结构 ， 
构 。 


的 主要 信息 ， 包 括 tag、text、elm、data、parent、children 等 


VNodeComponentOptions 


Ctor: Class« Component» 

propsData: Object 

listeners: Object 

parent: Component 

children: Array «any» | » Array « any» string 
tag: string 


name: string 
value: any 
oldValue: any 
arg: string 
modifiers: Object 


18-3 VNode 的 数据 结构 


图 
还 包含 了 VNodeData 、VNodeDirective 、 


E 


Vue 组 件 生成 。 


由 


| 普通 DOM 元 素 生 成 : 另 一 种 是 


性 。 它 主要 有 两 种 生成 方式 ， 其 
这 两 种 方式 生成 的 VNode 对 象 的 
素 生 成 的 VNode 对 象 ， 该 值 为 空 。 


(2) VNodeComponentOptions 


VNode 中 componentOptions 


(3) VNodeData 


属 
t 组 件 相 关 参 数 ， 包 括 Ctor. propData. listeners, parent, children, tag 等 属性 。 


种 是 


区 别 主要 是 在 componentOptions WEE, 如果 是 普通 DOM 元 


性 的 数据 类 型 用 来 描述 通过 Vue 组 件 生成 VNode 对 象 的 一 


VNode ! 


data 属性 的 数据 类 型 


ih VNode 包含 的 一 些 节 点 数据 ， 包 括 slot. ref. 


pk 


staticClass. style. class. props. attrs. transition, directives 等 。 


(4) VNodeDirective 


VNodeData 中 directives 属性 的 数据 类 型 用 来 描述 VNode 存储 的 指令 数据 ， 包 括 name. 
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value、oldValue、arg、modifiers 等 。 


在 了 解 了 VNode 及 相关 数据 结构 后 ， 我 们 心中 不 免 产 生 疑 问 ，VNode 是 如 何在 Vue PÆ 
成 的 呢 ? 可 以 先 通 过 图 18-4 看 一 下 VNode 的 生成 过 程 。 


has 'render' 
option? 


has ‘el’ 
option? 


has ‘template’ 
option? 


get template 
string 


parse 
template 
to ast 


ast to 
render 
code 


call render 
function 


code to 
render 
function 


create 
compoent 
VNode 


tag is nò=p 
string? 


is reserved 
tag? 


create 


DOM 
VNode 


图 18-4 VNode 的 生成 过 程 


从 图 中 我 们 可 以 看 到 ，VNode 生成 最 关键 的 点 是 通过 call render function, render 方法 在 
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Vue.js 2.0 中 有 两 种 生成 方式 : 第 一 种 是 直接 在 Vue 对 象 的 option 中 添加 render 字段 ; 第 二 种 是 
像 Vue.js 1.x 版 本 那样 写 一 个 模板 或 者 指定 一 个 el 根 元 素 ， 它 会 首先 转换 成 模板 ， 经 过 HTML 
语法 解析 器 生成 一 个 ast 抽象 语法 树 ， 对 语法 树 做 优化 ， 然 后 把 语法 树 转换 成 代码 片段 ， 最 后 
通过 代码 片段 生成 function 添加 到 option 的 render 字段 


在 整个 过 程 中 ， 特 别 值得 一 提 的 是 ast 语法 树 优 化 的 过 程 ， 它 主要 做 了 两 件 事情 : 


O 会 检测 出 静态 的 class 名 和 attributes， 这 样 它们 在 初始 化 泻 染 之 后 就 永远 都 不 会 再 被 比 
对 了 。 


O 会 检测 出 最 大 的 静态 子 树 〈 就 是 不 需要 动态 性 的 子 树 ) 并且 从 演 染 函数 中 蔡 取 出 来 。 这 
样 在 每 次 重 泻 染 时 ， 它 就 会 直接 重用 完全 相同 的 Vnode， 同 时 跳 过 比 对 。 


ud 


接 下 来 我 们 可 以 通过 一 段 简 单 的 代码 看 一 下 编译 后 的 泻 染 函数 。 代 码 示例 如 下 : 


<div id-"app"» 


«hl»Hello {{who}}</h1> 
</div> 
<script> 
new Vue ({ 
el: 'fapp', 
datas 1 
who: 'DDFE' 


</script> 


我 们 在 Vue 对 象 中 指定 了 el 根 元 素 ， 经 过 一 系列 的 编译 操作 后 ， 最 终生 成 render 方法 。 代 
码 示 例如 下 : 


(function () { 


with (this) { 
return h( e('div', 
(staticAttrs: ("id": "app"}}), 
[ ht e('hl!), 
[("Hello " + s(who))] 
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可 以 看 到 ，render 方法 使 用 了 with 方法 来 包 右 代码 快 ，with(this) 中 的 属性 和 方法 相当 于 通 
过 this 来 调用 ， 这 样 写 是 为 了 减少 代码 量 。 这 里 的 this 指向 的 是 Vue 对 象 实例 ， h、_e 方法 都 
是 和 VNode 相关 创建 的 方法 。 源 码 定义 如 1 


<1!-- 源 码 目 录 : src/core/instance/render.js--» 


7i 


Vue.prototype. h - renderElementWithChildren 


Vue.prototype. e - renderElement 


_h 和 e 方法 分 别 是 renderElementWithChildren, 、renderElement， 源 码 定义 如 下 : 


<!-- 源 码 目录 : src/core/vdom/create-element.js--» 


export function renderElementWithChildren ( 


vnode: VNode | void, 
children: VNodeChildren | void 
VNode | Array<VNode> | void { 
if (vnode) { 
const componentOptions - vnode.componentOptions 


if (componentOptions) { 


if (process.env.NODE ENV !-- 'production' && 
children && typeof children !== 'function') { 
warn( 


'A component\'s children should be a function that returns the ' + 
'children array. This allows the component to track the children ' + 


"dependencies and optimizes re-rendering.' 


} 
const CtorOptions = componentOptions.Ctor.options 
// functional component 
if (CtorOptions.functional) { 
return CtorOptions.render.call ( 
null, 


componentOptions.parent.$createElement, // h 


componentOptions.propsData || {}, // props 
normalizeChildren (children) // children 
) 
} else i 


// normal component 
componentOptions.children = children 
} 
] else { 


// normal element 
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vnode.setChildren (normalizeChildren (children)) 


} 


return vnode 


export function renderElement ( 
tag?: string | Class<Component> | Function | Object, 
data?: VNodeData, 
namespace?: string 
): VNode | void { 
// make sure to expose real self instead of proxy 
const context: Component = this. self 
const parent: ?Component = renderState.activeInstance 
const host = context !-- parent ? parent : undefined 
if (!parent) { 
process.env.NODE ENV !-- 'production' && warn( 
'createElement cannot be called outside of component ' 十 
"render functions." 
) 
return 
} 
if (!tag) { 
// in case of component :is set to falsy value 
return emptyVNode () 
} 
if (typeof tag === 'string') { 
let Cor 
if (config.isReservedTag(tag)) { 
return new VNode ( 
tag, data, 
undefined, undefined, undefined, 
namespace, context, host 
) 
else if ((Ctor = resolveAsset (context.Soptions, 'components', tag))) { 


return createComponent(Ctor, data, parent, context, host, tag) 


else i 
if (process.env.NODE ENV !-- 'production') { 
xt. 
!namespace && 


!(config.ignoredElements && config.ignoredElements.indexOf(tag) > -1) 
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config.isUnknownElement (tag) 


pot 


warn( 


"Unknown custom element: <' + tag + "> - did you ' + 


"register the component correctly? For recursive components, ' + 


‘make sure to provide the "name" option.' 


} 


return new VNode( 


tag, data, 


undefined, undefined, undefined, 


namespace, context, host 


} 
} else { 


return createComponent (tag, data, parent, context, host) 


renderElementWithChildren 方法 的 功能 是 给 一 个 VNode 对 象 添加 若干 子 VNode， 因 为 整个 
Virtual DOM 是 一 种 树 状 结构 ， 每 个 节点 都 可 能 会 有 若干 子 节点 。 


renderElement 方法 的 功能 是 创建 一 个 VNode 对 象 ， 如 果 是 一 个 reserved tag (EEU html, 
head 等 一 些 合 法 的 HTML 标签 ), 则 会 创建 普通 的 DOM VNode 对 象 ; 如 果 是 一 个 component tag 


(通过 Vue 注册 的 


各 定义 component )， 则 会 创建 Component VNode 对 象 ， 它 的 


VNodeComponentOptions 不 为 null。 


创建 好 VNode， 下 一 步 就 是 要 把 Virtual DOM 泻 染 成 真正 的 DOM， 我 们 看 一 下 Vue.js 2.0 


是 怎么 做 的 。 


2. VNode patch 生成 DOM 


在 Vue.js 2.0 F, VNode 转换 成 真正 的 DOM 是 通过 patch(oldVnode, vnode, hydrating) 77 17; 


实现 的 ， 来 看 一 下 patch 方法 。 源 码 定义 如 下 ; 


<1!-- 源 码 目录 : src/core/vdom/patch.js--» 


return function patch 


let elm, parent 


(oldVnode, vnode, hydrating) { 


const insertedVnodeQueue = [] 


if (!oldVnode) { 
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// empty mount, create new root element 
createElm(vnode, insertedVnodeQueue) 
} else T 
const isRealElement = isDef (oldVnode.nodeType) 
if (!isRealElement && sameVnode (oldVnode, vnode)) { 
patchVnode (oldVnode, vnode, insertedVnodeQueue) 
b else 
if (isRealElement) { 
// mounting to a real element 
// check if this is server-rendered content and if we can perform 
// a successful hydration. 
if (oldVnode.hasAttribute('server-rendered')) { 
oldVnode.removeAttribute('server-rendered') 
hydrating = true 
} 
if (hydrating) { 
if (hydrate(oldVnode, vnode, insertedVnodeQueue)) { 
invokeInsertHook (insertedVnodeQueue) 
return oldVnode 
} else if (process.env.NODE ENV !== 'production') { 
warn ( 
'The client-side rendered virtual DOM tree is not matching ' + 
'server-rendered content. Bailing hydration and performing ' + 


"full client-side render.' 


} 
// either not server-rendered, or hydration failed. 
// create an empty node and replace it 
oldVnode = emptyNodeAt (oldVnode) 

} 

elm = oldVnode.elm 

parent = nodeOps.parentNode (elm) 

createElm(vnode, insertedVnodeQueue) 

if (parent !== null) { 
nodeOps.insertBefore (parent, vnode.elm, nodeOps.nextSibling (elm) ) 
removeVnodes (parent, [oldVnode], 0, 0) 

} else if (isDef(oldVnode.tag)) { 


invokeDestroyHook (oldVnode) 
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} 


invokeInsertHook (insertedVnodeQueue) 


return vnode.elm 


patch 方法 支持 3 个 参数 ， 其 中 oldVnode 是 
前 的 VNode; vnode 是 VNode 对 象 类 型 ， 


create new 
no——P 
root element 


oldVnode is not 

realElement&& 
sameVnode 

oldVnode,vnode)? 


yes 


patchVNode 


create 
element 
by vnode 


oldVnode 
has parenet 
element? 


oldVnode 
tag define? 


insert element 
and remove 
oldVnode 


invoke insert 
hook 


patch 方法 的 运行 逻辑 看 上 去 比较 复杂 ， 其 


replace oldVnode 


图 18-5 patch 方法 运行 逻辑 


个 真实 的 DOM 或 者 一 个 VNode WR, CK 


它 表 示 符 替换 的 VNode; hydrating 是 bool 类 型 ， 
攻 示 是 否 直 接 使 用 服务 端 泻 染 的 DOM 元素， 因为 Vue.js 2.0 也 支持 服务 端 泻 染 。 我 们 可 以 通 
过 流程 图 看 一 下 patch 方法 的 运行 逻辑 ， 如 图 


18-5 所 示 。 


is server 
rendered? 


hydrate 
success? 


invoke insert 
(Puer) 


create empty 
VNode and 


图 


有 两 个 方法 createElm 和 patchVnode 是 生成 
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DOM 的 关键 。 源 码 定 义 如 下 : 


<1!-- 源 码 目录 : src/core/vdom/patch.js--» 


function createElm (vnode, insertedVnodeQueue) { 
let i, elm 
const data - vnode.data 
if (isDef(data)) { 
if (isDef(i = data.hook) && isDef(i = i.init)) i(vnode) 
// after calling the init hook, if the vnode is a child component 
// it should've created a child instance and mounted it. the child 
// component also has set the placeholder vnode's elm. 
// in that case we can just return the element and be done. 
if (isDef(i = vnode.child)) { 
invokeCreateHooks (vnode, insertedVnodeQueue) 
setScope (vnode) 


return vnode.elm 


} 
const children = vnode.children 
const tag = vnode.tag 
if (isDef(tag)) { 
elm = vnode.elm = vnode.ns 
? nodeOps.createElementNS (vnode.ns, tag) 
nodeOps.createElement (tag) 
setScope (vnode) 
if (Array.isArray(children)) { 
for (i = 0; i < children.length; ++i) { 
nodeOps.appendChild(elm, createElm(children[i], insertedVnodeQueue) ) 
} 
} else if (isPrimitive(vnode.text)) { 
nodeOps.appendChild(elm, nodeOps.createTextNode (vnode.text) ) 
} 
if (isDef(data)) { 
invokeCreateHooks (vnode, insertedVnodeQueue) 
} 
} else { 
elm = vnode.elm = nodeOps.createTextNode (vnode.text) 
} 


return vnode.elm 
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function patchVnode (oldVnode, vnode, insertedVnodeQueue) { 
if (oldVnode --- vnode) return 
let i, hook 
if (isDef(i = vnode.data) && isDef(hook = i.hook) && isDef(i = hook.prepatch)) { 


i(oldVnode, vnode) 


} 
const elm 


const oldCh 


vnode.elm 


oldVnode.elm 


oldVnode.children 


const ch = vnode.children 
if (isDef(vnode.data)) { 
for (i = 0; i < cbs.update.length; ++i) cbs.update[i] (oldVnode, vnode) 
if (isDef (hook) && isDef(i = hook.update)) i(oldVnode, vnode) 
} 
if (isUndef(vnode.text)) { 
if (isDef(oldCh) && isDef(ch)) { 
if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue) 
) else if (isDef(ch)) { 
if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '') 
addVnodes (elm, null, ch, 0, ch.length - 1, insertedVnodeQueue) 
} else if (isDef(oldCh)) { 
removeVnodes (elm, oldCh, 0, oldCh.length - 1) 
) else if (isDef(oldVnode.text)) { 
nodeOps.setTextContent(elm, '') 


} 


) else if 


nodeOps.setTextContent (elm, 


} 
if (isDef(vnode.data) ) 
(i 0; 


(isDef (hook) 


for 


JE 


(oldVnode.text 


i < cbs.postpatch.length; 
&& isDef(i 


= vnode.text) { 


vnode.text) 


{ 


++i) cbs.postpatch[i] (oldVnode, vnode) 


i(oldVnode, vnode) 


hook.postpatch) ) 


(1) createElm(vnode, inserted VnodeQueue) 


该 方法 会 根据 vnode 的 数据 结构 创建 真实 的 DOM 节点 ， 如 果 vnode 有 children, WAW 


这 些 


子 节点 ， 递 归 调 用 createElm 方法 。InsertedVnodeQueue 是 记录 子 节点 创建 顺序 的 队列 ， 


创建 一 个 DOM 元 素 就 会 往 这 个 队列 ， 


插入 当前 的 VNode。 当 整个 VNode 对 象 全 部 转换 成 为 


SEH DOM 树 时 ， 会 依次 调 | 


这 个 队列 中 VNode hook 的 insert 方法 。 


» o 
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(2) patchVnode(oldVnode, vnode, insertedVnodeQueue) 


该 方法 会 通过 比较 新 旧 VNode 节点 ， 根 据 不 同 的 状态 对 DOM 做 合理 的 更 新 操作 (添加 、 
移动 、 删 除 等 )， 整 个 过 程 还 会 依次 调用 prepatch、update、postpatch 等 钩子 函数 。 在 编译 阶段 
生成 的 一 些 静 态 子 树 ， 在 这 个 过 程 中 由 于 不 会 改变 而 直接 跳 过 比 对 。 动 态 子 树 在 比较 过 程 中 比 
较 核 心 的 部 分 就 是 当 新 旧 VNode 同时 存在 children， 通 过 updateChildren 方法 对 子 节点 做 更 新 。 


Vue.js 2.0 在 这 块 的 实现 很 精彩 ， 接 下 来 我 们 重点 看 一 下 这 个 方法 的 实现 。 源 码 定 义 如 


7i 


<1!-- 源 码 目录 : src/core/vdom/patch.js--» 


function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue) { 


let 
let 
let 
let 
let 
let 
let 
Let 


Let 


oldStartIdx = 0 

newStartIdx = 0 

oldEndIdx = oldCh.length - 1 
oldStartVnode = oldCh[0] 
oldEndVnode = oldCh[oldEndIdx] 
newEndIdx = newCh.length - 1 
newStartVnode = newCh[0] 


newEndVnode = newCh[newEndIdx] 


oldKeyToIdx, idxInOld, elmToMove, before 


while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) { 


if (isUndef(oldStartVnode)) { 


oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left 


else if (isUndef(oldEndVnode)) { 

oldEndVnode = oldCh[--oldEndIdx] 

else if (sameVnode(oldStartVnode, newStartVnode)) { 
patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue) 
oldStartVnode = oldCh[++oldStartIdx] 

newStartVnode = newCh[++newStartIdx] 

else if (sameVnode(oldEndVnode, newEndVnode)) { 

patchVnode (oldEndVnode, newEndVnode, insertedVnodeQueue) 

oldEndVnode = oldCh[--oldEndIdx] 

newEndVnode = newCh[--newEndIdx] 

else if (sameVnode(oldStartVnode, newEndVnode)) ( // Vnode moved right 
patchVnode (oldStartVnode, newEndVnode, insertedVnodeQueue) 
nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling (oldEndVnode.elm)) 
oldStartVnode = oldCh[++oldStartIdx] 

newEndVnode - newCh[--newEndIdx] 

else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left 


patchVnode (oldEndVnode, newStartVnode, insertedVnodeQueue) 
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nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm) 
oldEndVnode = oldCh[--oldEndIdx] 


newStartVnode = newCh[++newStartIdx] 


else { 


if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, 
oldEndIdx) 


idxInOld = oldKeyToIdx[newStartVnode.key] 
if (isUndef(idxInOld)) ( // New element 


nodeOps.insertBefore(parentElm, createElm(newStartVnode, insertedVnodeQueue), 
oldStartVnode.elm) 


newStartVnode = newCh[++newStartIdx] 


else { 
elmToMove = oldCh[idxInOld] 


/* istanbul ignore if */ 


if (process.env.NODE ENV !-- 'production' && !elmToMove) { 
warn( 
'It seems there are duplicate keys that is causing an update error. ' 十 


'Make sure each v-for item has a unique key.' 


} 
if (elmToMove.tag !== newStartVnode.tag) { 
// same key but different element. treat as new element 


nodeOps.insertBefore(parentElm, createElm(newStartVnode, insertedVnodeQueue), 
oldStartVnode.elm) 


newStartVnode = newCh[++newStartIdx] 
} else { 
patchVnode (elmToMove, newStartVnode, insertedVnodeQueue) 
oldCh[idxInOld] = undefined 
nodeOps.insertBefore(parentElm, newStartVnode.elm, oldStartVnode.elm) 


newStartVnode = newCh[++newStartIdx] 


} 
if (oldStartIdx > oldEndIdx) { 
before = isUndef (newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1] .elm 
addVnodes (parentElm, before, newCh, newStartIdx, newEndIdx, insertedVnodeQueue) 
} else if (newStartIdx > newEndIdx) { 
removeVnodes (parentElm, oldCh, oldStartIdx, oldEndIdx) 
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updateChildren 这 个 方法 看 上 去 比较 复杂 ， 它 主要 通过 while 循环 一 遍 遍 对 比 两 棵 树 的 子 节 
点 来 更 新 DOM。 为 了 更 加 直观 地 理解 整个 比较 更 新 过 程 ， 我 们 可 以 通过 一 个 例子 来 模拟 一 下 。 


假设 有 新 旧 两 棵 树 ， 树 中 的 子 节点 分 别 用 a. b. c. d 等 代号 表示 ， 不 同 的 代号 代表 不 同 的 
VNode。 初 始 状态 如 图 18-6 所 示 。 


old 
: e i 
oldStartidx:0 oldEndidx:3 newStartldx:0 newEndldx:3 
oldStartVnode:a oldEndVnode:d newStartVnode:a newEndVnode:b 


图 18-6 ”新 旧 VNode 子 节点 更 新 一 一 初始 状态 


在 设置 好 初始 状态 后 ， 我 们 开始 第 一 遍 比较 。 此 时 oldStartVnode 为 a. newStartVnode 也 为 
a, 命中 了 sameVnode(oldStartVnode, newStartVnode) 2 $5, 则 直接 调用 patchVnode (oldStartVnode, 
newStartVnode, insertedVnodeQueue) 方 法 更 新 节点 ae 接着 把 oldStartldx 和 newStartldx 索引 分 别 
+1， 形 成 状态 如 图 18-7 所 示 。 


old 


oldStartldx:1 oldEndldx:3 newStartldx:1 newEndldx:3 
oldStartVnode:b oldEndVnode:d newStartVnode:d newEndVnode:b 


图 18-7 ”新旧 VNode 子 节点 更 新 一 一 step1 


更 新 完 节 点 a 后 ， 我 们 开始 第 二 遍 比 较 。 此 时 oldStartVnode 为 bp，newEndVnode 也 为 b， 
了 sameVnode(oldStartVnode, newEndVnode) 逻辑 ， 则 调用 patchVnode(oldStartVnode， 
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newEndVnode，insertedVnodeQueue) 方 法 更 新 节点 b。 接 着 调用 nodeOps.insertBefore(parentElm, 
oldStartVnode.elm,，nodeOps.nextSibling(oldEndVnode.elm)) 方 法 把 节点 b 移 到 树 的 最 右边 。 最 后 


把 oldStartIdx 索引 +1，newEndIdx 索引 -1， 形 成 状态 如 18-8 所 示 。 


000 099 


newStartldx:1 newEndldx:2 


oldStartldx:2  oldEndldx:3 
oldStartVnode:c oldEndVnode:d newStartVnode:d newEndVnode:e 


图 18-8 新 上 月 VNode 子 节点 更 新 一 一 step2 


更 新 完 节 点 b 后 ， 我 们 开始 第 三 遍 比 较 。 此 时 oldEndVnode 为 4，newStartVnode 也 为 d， 


命中 了 sameVnode(oldEndVnode, newStartVnode) i¥ $, J) J FY patchVnode(oldEndVnode, 


newStartVnode, insertedVnodeQueue) 方 法 更 新 节点 d。 接 着 调用 nodeOps.insertBefore(parentElm, 
oldEndVnode.elm, oldStartVnode.elm) 方 法 把 节点 d 移 到 节点 ec 的 左边 ,最 后 把 oldEndIdx 索引 -1， 


newStartldx 索引 +1， 形 成 状态 如 18-9 所 示 。 


^ EN 人 
© 


oldStartldx:2 newEndldx:2 
oldStartVnode:c newEndVnode:e 
oldEndidx:2 newStartldx:2 


oldEndVnode:c newStartVnode:e 


Al18-9 ”新 上 月 VNode 子 节点 更 新 一 一 step3 


更 新 完 节点 d 后 ,我们 开始 第 四 遍 比较 。 此 时 newStartVnode 为 e， 节 点 e 在 旧 树 里 是 没有 
的 ， 因 此 应 该 被 作为 一 个 新 元 素 插 入 ， 调 用 nodeOps.insertBefore(parentElm, createElm 
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(newStartVnode, inserted VnodeQueue), oldStartVnode.elm) 77 12:30 5 K e 插入 到 节点 c 之 前 。 接 
把 newStartldx 索引 +1， 形 成 状态 如 18-10 所 示 。 


ria 
06000 000 


ma 2 YS n 2 newStartldx:3 
oldStartVnode:c newEndVnode:e newStartVnode:b 
oldEndldx:2 


oldEndVnode:c 


图 18-10 ”新 旧 VNode 子 节点 更 新 一 一 step4 


插入 节点 ee 后， 我 们 可 以 看 到 newStartldex 已 经 大 于 newEndIdx T, while 循环 已 经 完 
接着 调用 removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx) 删 除 旧 树 中 剩余 的 节点 c, 


形成 状态 如 18-11 所 示 。 


毕 。 
EL 
最 终 


ooo m 000 


"ud 2 sm 2 newStartldx:3 
oldStartVnode:c newEndVnode:e newStartVnode:b 
oldEndldx:2 


oldEndVnode:c 


图 18-11 新 旧 VNode 子 节点 更 新 一 一 更 新 完成 


updateChildren 通过 以 上 几 步 操作 完成 了 旧 树 子 节 点 的 更 新 , 可 以 看 到 实际 上 只 用 了 一 些 比 
较 小 的 DOM 操作 ， 比 起 用 innerHTML 直接 替换 所 有 子 节点 这 种 方法 ， 在 性 能 上 有 所 提升 ， 并 
当 子 节点 越 复杂 时 ， 这 种 提升 效果 就 越 明 显 。 


VNode 通过 patch 方法 生成 DOM 后 ， 会 调用 mounted hook。 至 此 ， 整 个 Vue 实例 就 创建 
完成 了 。 当 这 个 Vue 实例 的 Watcher 观察 到 数据 变化 时 ,会 再 次 调用 render 方 法 生成 新 的 VNode， 
接着 调用 patch 方法 对 比 新 旧 VNode 来 更 新 DOM. 
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Vue.js 2.0 使 用 了 Virtual DOM 技术 ， 除 了 在 数据 变化 一 一 更 新 DOM 这 块 有 性 能 方面 的 提 
升 外 ， 还 可 以 很 好 地 支持 服务 端 演 染 技术 。 接 下 来 就 让 我 们 看 一 下 Vue.js 2.0 的 另 一 大 亮点 一 一 
服务 端 泻 染 技术 。 这 里 我 们 只 分 析 实 现 原 理 ， 具 体 使 用 需要 等 到 Vue.js 2.0 正式 发 布 后 。 


18.3 ”服务 端 泻 染 技术 


Vue.js 1.x 版 本 提倡 组 件 化 开发 模式 ， 把 页 面 拆 分 成 一 个 个 Vue 组 件 ， 页 面 泻 染 工作 交 给 前 
Wm JS 完成 。Vue.js 2.0 提供 了 服务 端 泻 染 技 术 ， 服 务 端 演 染 比 起 客户 端 演 染 页 面 ， 有 以 下 几 点 
优势 : 

1， 首 屏 演 染 速 度 更 快 

客户 端 泻 染 的 一 个 缺点 是 ， 用 户 第 一 次 访问 页 面 ， 此 时 浏览 器 没有 缓存 ， 需 要 先 从 服务 端 
下 载 JS。 然 后 再 通过 JS 操作 动态 添加 DOM 并 泻 染 页 面 ， 时 间 较 长 ， 而 服务 端 演 染 则 是 ， 用 户 
第 一 次 访问 浏览 器 可 以 直接 解析 HTML 文档 并 泻 染 页 面 ， 首 屏 泻 染 速度 要 比 客户 端 泻 染 快 。 


2. SEO 


服务 端 泻 染 可 以 让 搜索 引擎 更 容易 读 取 页 面 的 meta 信息 ， 以 及 其 他 SEO 相关 信息 ， 大 大 
增加 了 网 站 在 搜索 引擎 中 的 可 见 度 。 


3. 减少 HTTP 请 求 


服务 端 泻 染 可 以 把 一 些 动 态 数据 在 首次 泻 染 时 同步 输出 到 页 面 ， 而 客户 端 泻 染 需要 通过 
AJAX 等 手段 异步 获取 这 些 数据 ， 这 样 就 相当 于 多 了 一 次 HTTP 请 求 。 


Vue.js 2.0 提供 了 两 种 服务 端 泻 染 方式 ， 即 普通 服务 端 泻 染 和 流 式 服务 端 泻 染 。 接 下 来 让 我 
们 看 一 下 这 两 种 服务 端 泻 染 的 原理 。 


18.3.1 RRS om E ARR 


Vue.js 2.0 提供 了 renderToString 接口 ， 可 以 在 服务 端 把 Vue 组 件 演 染 成 模板 字符 串 。 我 们 
先 看 一 下 renderString 的 用 法 ， 源 码 定义 如 下 : 


<!-- 源 码 目录 : benchmarks/ssr/renderToString.js--» 


const Vue = require('../../dist/vue.common.js') 
const createRenderer = require('../../packages/vue-server-renderer') 
const renderToString - createRenderer().renderToString 


const gridComponent = require('./common.js') 
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console.log('--- renderToString --- ') 
const self - (global || root) 
Self.s = self.performance.now() 
renderToString (new Vue(gridComponent), () => { 
console.log('Complete time: ' + (self.performance.now() - self.s).toFixed(2) + 'ms') 


console.log() 
} 


这 段 代 码 是 运行 在 Nodejs 环境 中 的 ， 主 要 依赖 vue.common.js. vue-server-render. HP 
vue.common.js 是 Vue 运行 时 代码 ， 不 包括 编译 部 分 ，vue-server-render 对 外 提供 createRenderer 
方法 ，renderToString 是 createRenderer 方法 返回 值 的 一 个 属性 ， 它 支持 传 入 Vue KAIMER TE 
成 后 的 回调 函数 。 这 里 要 注意 ， 由 于 引用 的 是 只 包含 运行 时 的 Vue 代码 ， 不 包括 编译 部 分 ， 所 
以 Vue 实例 必须 包含 明确 的 render 方法 , 泻 染 完 成 后 的 回调 函数 支持 两 个 参数 , 妈 err 和 result, 
其 中 err 表示 是 否 出 错 ; result 表示 DOM 字符 串 。 在 实际 应 用 中 ， 我 们 可 以 将 从 回调 函数 拿 到 
的 result 拼接 到 模板 中 。 接 下 来 我 们 看 一 下 renderToString 的 实现 ， 源 码 定义 如 下 : 


<!-- 源 码 目录 : src/server/create-render.js--» 


const render = createRenderFunction (modules, directives, isUnaryTag) 
return { 
renderToString ( 


component: Component, 
done: (err: ?Error, res: ?string) => any 
PS svete, 4 
let xesulpoe t* 
let stackDepth = 0 
const write = (str: string, next: Function) => ( 
result += str 
if (stackDepth >= MAX STACK DEPTH) { 
process.nextTick(() => { 
try { next() } catch (e) { 
done (e) 
} 
} 
j else { 
stackDeptht+ 
next () 


stackDepth-- 


try { 
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render(component, write, () => { 
done (null, 
} 


} catch 


result) 


(e) { 
done (e) 


renderToString 方法 支持 传 入 Vue 实例 component 和 演 染 完成 后 的 回调 函数 done。 它 定义 了 
result 变量 ， 同 时 定义 了 write 方法 ， 最 后 执行 render 方法 。render 方法 的 功能 是 把 component 
转换 成 模板 字符 串 str, SAX write 方法 中 。write 方法 不 断 拼 接 模板 字符 串 ， 用 result 变量 做 存 


储 , 然 后 调 | 


] next 方法 。 当 component 通过 render 演 染 模板 字符 


ey 


完毕 后 ,执行 done, EA result. 


整个 过 程 比较 核心 的 步骤 就 是 render 方法 ， 我 们 看 一 下 它 的 实现 ， 源 码 定义 如 下 : 


<1!-- 源 人 码 目录 : src/server/render.js--» 
return function render ( 
component: Component, 
write: (text: string, next: Function) 
done: Function 


feo 


=> void, 


renderNode (component. render(), write, done, true) 


render 方法 实际 上 是 执行 了 renderNode 方法 ， 并 把 component. render(0) 方 法 生成 的 VNode 


对 象 作为 参数 传 入 。renderNode 方法 定义 如 下 : 


<1!-- 源 码 目录 : src/server/render.js--» 
function renderNode ( 

node: VNode, 

write: Function, 

next: Function, 


isRoot: boolean 
) (t 
if (node.componentOptions) { 
const child - 
getCachedComponent (node) || 
createComponentInstanceForVnode (node) 
child.parent = node 
renderNode(child, write, next, isRoot) 


) else { 


. render () 
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if (node.tag) ( 
renderElement (node, write, next, isRoot) 
} else { 


write (node.raw ? node.text : encodeHTMLCached(node.text), next) 


renderNode 方法 首先 判断 node 类 型 。 如 果 是 一 个 component VNode， 则 根据 这 个 node 创 
建 一 个 组 件 的 实例 并 调用 render 方法 作为 当前 node 的 child VNode， 然 后 递归 调用 renderNode 
方法 ; 如果 是 一 个 普通 的 DOM VNode 对 象 ， 则 调用 renderElement 泻 染 元 素 ; 否则 就 是 一 个 文 
本 节点 ， 直 接 调 用 write 方法 。 这 里 使 用 了 getCachedComponent 方法 尝试 从 缓存 中 拿 VNode 实 
例 ， 对 于 具有 相同 cid 的 component VNode， 我 们 只 创建 一 次 。 真 正 把 VNode 对 象 泻 染 成 DOM 
对 象 的 方法 是 renderElement， 源 但 定义 如 下 : 


<1!-- 源 码 目录 : src/server/render.js--» 


N 


function renderElement ( 

el: VNode, 

write: Function, 

next: Function, 

isRoot: boolean 

) { 

if (isRoot) { 
if (lel.data) el.data = (] 
if (lel.data.attrs) el.data.attrs = {} 
el.data.adttrs[|'server-rendered'] = 'true' 

} 

const startTag = renderStartingTag (el) 

const endTag = ^«/$[el.tag]»" 

if (isUnaryTag(el.tag)) { 


write(startTag, next) 


else if (!el.children || !el.children.length) { 


write(startTag + endTag, next) 


else { 
const children: Array«VNode» = el.children || [] 
write(startTag, () => { 

const total = children.length 

let rendered = 0 

function renderChild (child: VNode) { 


renderNode (child, write, () => { 
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rendered++ 
if (rendered < total) { 
renderChild (children [rendered] ) 
} else { 
write(endTag, next) 
} 
}, false) 
} 
renderChild(children[0] 
} 


renderElement 方法 的 主要 功能 是 把 VNode 对 象 泻 染 成 DOM 元 素 , 我 们 先 看 一 下 它 的 流程 
图 ， 如 图 18-12 所 示 。 


renderElement 
is root el.data.attrs['server- 
element? rendered']- true' 


render 
start tag 


write start 
tag 


render 

: child 

write start wale nodes 
tag tag and 
end tag 


write end 
tag 


图 18-12 renderElement 泻 染 DOM 元 素 流 程 图 


renderElement 首先 判断 元 素 是 否 是 根 元 素 ， 如 果 是 则 给 元 素 添 加 server-rendered 属性 。 接 
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下 来 泻 染 开 始 标签 ， 并 对 开始 标签 类 型 进行 判断 ， 如 果 是 后 
则 直接 通过 write 方法 写 入 开始 标签 ， 再 执行 next 方法 ，DOM WAHE. 


完 
通过 write 方法 写 入 闭合 标签 ， 最 后 执行 next 方法 ，DOM AREE. 


18.3.2” 流 式 服 务 端 泻 染 


通 朋 


AURA MAREE Vuejs 2.0 在 服务 端 渲染 上 的 一 大 亮点 。 普 


步 服务 器 演 染 在 优化 不 当时 其 至 会 给 客户 端 获得 内 容 的 速度 带 来 负面 


renderToStream 
中 。 流 式 泻 染 能 够 确保 服务 端 响应 度 ， 也 能 让 |) 
法 ， 源 码 定义 如 下 : 


renderToStream 的 | 


<!1-- 源 码 目录 : benchmarks/ssr/renderToStream.js--» 

const Vue = require('../../dist/vue.common.js') 

const createRenderer = require('../../packages/vue-server-renderer') 
const renderToStream - createRenderer().renderToStream 

const gridComponent = require('./common.js') 

console.log('--- renderToStream --- ') 

const self = (global || root) 


Self.s = self.performance.now() 


const stream - renderToStream(new Vue (gridComponent)) 
let str = '' 
const stats = I] 
stream.on('data', chunk => { 
str += chunk 
Stats.push(self.performance.now()) 
} 
stream.on('end', () => { 
Stats.push(self.performance.now()) 
stats.forEach((val, index) => { 
'Chunk' 


(val - self.s).toFixed(2) 


const type - index !-- stats.length - 1 ? 'Complete' 


console.log(type + ' time: ' 十 
} 


console.log() 


闭合 标签 如 <img>、<input> 这 样 的 ， 
1 果 元 素 没 有 子 元 素 
习 闭 合 标签 , 则 直接 通过 write 方法 写 入 开始 标签 和 闭合 标签 , 再 执行 next 方法 ， 


DOM 


Fe, 否则 就 通过 write 方法 写 入 开始 标签 ， 接 着 调用 renderNode 方法 演 染 所 有 子 节 点 ， 


P 


接口 ， 在 泻 染 组 件 时 返回 一 个 可 读 的 stream， 可 以 直接 pipe 
j 户 更 快 地 获得 泻 染 内 容 。 我 们 先 看 一 下 


+ 'ms') 


山 泻 染 有 一 个 痛 点 
由 于 泻 染 是 同步 过 程 ， 所 以 如 果 这 个 App 很 复杂 的 话 ， 它 可 能 会 阻塞 服务 器 的 event loop, E 
影响 。Vue.js 2.0 提供 了 


到 HTTP Response 
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这 段 代 人 码 也 是 同样 运行 在 Node.js 环境 中 的 ， 与 renderToString 不 同 ，renderToStream 会 把 
Vue 实例 泻 染 成 一 个 可 读 的 stream。 源 码 演示 的 是 监听 数据 的 读 取 ， 并 记录 读 取 数 据 的 时 间 。 
而 在 实际 应 用 中 ， 我 们 可 以 这 样 写 ， 代 码 示 例如 下 : 


const Vue = require('../../dist/vue.common.js') 


const createRenderer = require('../../packages/vue-server-renderer') 
const renderToStream - createRenderer().renderToStream 
const gridComponent = require('./common.js') 
const stream - renderToStream(new Vue (gridComponent)) 
app.use(function(req, res) { 

stream.pipe (res) 
}) 


如 果 代 码 运行 在 Express 框架 中 ， 则 可 以 通过 app.use 方法 创建 middleware， 然 后 直接 把 
stream pipe 到 res 中 , 这 样 客 户 端 就 能 很 快 地 获得 演 染 内 容 了 。 接 下 来 我 们 看 一 下 renderToStream 
的 实现 ， 源 码 定 义 如 下 : 


<1!-- 源 码 目录 : src/server/create-render.js--» 


const render = createRenderFunction (modules, directives, isUnaryTag) 


return { 


renderToStream (component: Component): RenderStream { 
return new RenderStream((write, done) => { 
render (component, write, done) 


}) 


renderToStream 传 入 一 个 Vue 对 象 实例 ， 返 回 的 是 一 个 RenderStream 对 象 的 实例 。 我 们 来 
看 一 下 RenderStream 对 象 的 实现 ， 源 但 定义 如 下 : 


<1!-- 源 码 目录 : src/server/render-stream.js--» 


import stream from 'stream' 

import ( MAX STACK DEPTH ] from './create-renderer' 

/** 

* Original RenderStream implmentation by Sasha Aickin (@aickin) 
* Licensed under the Apache License, Version 2.0 

* Modified by Evan You (@yyx990803) 

* f 


export default class RenderStream extends stream.Readable { 
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buffer: string; 
render: Function; 
expectedSize: number; 
stackDepth: number; 
write: Function; 
next: Function; 
end: Function; 
done: boolean; 
constructor (render: Function) { 
super () 
this.buffer = '' 
this.render = render 
this.expectedSize = 0 
this.stackDepth = 0 
this.write = (text: string, next: Function) => { 
const n = this.expectedSize 
this.buffer += text 
if (this.buffer.length >= n) { 
this.next - next 
this.pushBySize (n) 
y else 4 
// continue rendering until we have enough text to call this.push(). 
// sometimes do this as process.nextTick to get out of stack overflows. 
if (this.stackDepth >= MAX STACK DEPTH) { 
process.nextTick(() => { 
try { next() } catch (e) { 


this.emit('error', e) 


} 


else { 


this.stackDeptht+ 
next () 


this.stackDepth-- 


} 
this.end = () => { 
// the rendering is finished; we should push out the last of the buffer. 
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this.done - true 


this.push(this.buffer) 


} 
pushBySize (n: number) { 
const bufferToPush = this.buffer.substring(0, 
this.buffer = this.buffer.substring (n) 
this.push (bufferToPush) 
} 
tryRender () { 
try { 
this.render(this.write, this.end) 
} catch (e) { 


this.emit('error', e) 


} 
tryNext () { 
try { 
this.next () 
} catch (e) { 


this.emit('error', e) 


read (n: number) { 


this.expectedSize - n 


n) 


// it's possible that the last chunk added bumped the buffer up to » 2 * n, 


// which means we will need to go through multiple read calls to drain it 


// down to « n. 
if (this.done) { 
this.push (null) 
return 
} 
if (this.buffer.length >= n) { 
this.pushBySize (n) 
return 
} 
if (!this.next) { 


// start the rendering chain. 
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this.tryRender() 


} els 


// continue with the rendering. 


e { 


this.tryNext () 


RenderStream 继承 了 node 中 的 可 


读 流 的 实 
表明 它 是 


一 些 数 据 z 


传 入 null 
的 实现 。 


读 


一 个 内 部 方法 ， 并 且 不 应 该 被 


参数 时 ， 它 会 触发 数据 结束 信 


1. Constructor(render) 


构造 函数 方法 首先 通过 super 方法 调 
化 ， 然 后 初始 化 buffer、expectedSize、stackDepth、render 等 字段 。 其 中 buffer 表示 


而 且 至 少 需要 调用 一 次 push(chunk) 方 法 ， 


j 户 程序 直接 调用 。 
read 方法 才 
号 〈EOF)。 接 下 来 我 们 详细 


1 了 父 类 的 构造 函数 ， 以 便 


iit stream.Readable， 它 是 一 个 自 定义 的 可 读 流 。 所 有 可 
现 都 必须 提供 一 个 _read 方法 从 底层 资源 抓 取 数据 ,注意 , 这 个 方法 是 以 下 画 
卖 流 通过 push 方法 向 队列 中 插入 
D BUR. = push 方法 
下 RenderStream 类 


线 开 头 的 ， 


和 地 初始 


tH; expectedSize 为 每 次 期 望 往 读 取 队 列 中 插入 内 容 的 大 小 ; stackDepth 


用 的 深度 ; render 保存 传 入 的 render 方法 。 最 后 分 别 定义 了 write 和 end 方法 。 


2. Write(text, next) 


write 方法 


E 栈 溢出 


于 expectedSize， 则 用 this.next 保存 next 方法 ,同时 ii 
队列 中 ; 如 果 buffer.length 小 于 expectedSize, 则 调 ) 

之 前 会 判断 stackDepth 的 大 小 ; 
write 方法 递归 调用 的 深度 已 经 超过 设 定 值 ， 


o 


3. end 


end 方法 设置 this.done 标志 位 为 true, 标识 组 件 的 泻 染 
缓冲 区 剩余 内 容 推 入 读 取 队列 | 


_read(n) 


方法 把 
4. 
我 们 


先 来 看 一 下 它 的 实现 逻辑 ， 如 


o 


图 18-13 所 示 。 


缓冲 区 字符 
记录 write 方法 递归 调 


首先 把 text 拼接 到 buffer 缓冲 区 ， 然 后 判断 buffer.length. WIR buffer.length 大 
5H this.pushBySize(n) 把 缓冲 区 内 容 推 入 
J next 方法 继续 泻 染 引 
如 果 大 于 或 等 于 MAX STACK DEPTH, 


HE, 在 调用 next 


则 说 明 


过 process.nextTick 的 方式 调用 next 方法 ， 避 免 


] this.push(buffer) 
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this.expectedSize-n 


qmi ET SUR a a this.tryRender() 
yes yes 


yes 
this.push (null) (wane ) this.tryNext() 


thi 
图 18-13 ”_read 方 法 实现 逻辑 图 


_read(n) 方 法 首先 通过 this.expectedSize=n 记录 了 本 次 读 取 的 字 节 数 ， 然 后 判断 this.done。 
如 果 为 true 则 表示 组 件 已 泻 染 完毕 ， 这 时 候 调用 this.push(nu 了 D 触 发 数据 结束 信号 (EOF)。 如 果 
泻 染 未 完成 ， 接 下 来 判断 this.buffer.length。 如 果 大 于 n 则 说 明 缓 冲 区 的 字符 串 长 度 是 够 ， 可 以 
调用 this.pushBySize(n) 方 法 把 缓冲 区 内 容 推 入 读 取 队 列 中 ; 如 果 this.buffer.length 小 于 n， 接 下 
来 判断 this.next。 如 果 为 false 则 表示 开始 泻 染 组 件 ， 调 用 this.tryRender0 开 始 泻 染 组 件 ; 否则 
调用 this.tryNextO 继 续 泻 染 组 件 。 


5. PushBySize(n) 
pushBySize 方法 截取 buffer 绥 冲 区 前 n 个 长 度 的 数据 , 推 入 到 读 取 队列 中 , 同时 更 新 buffer 
缓冲 区 ， 删 除 前 地 条 数据 。 


6. tryRender 


tryRender 方法 调用 this.render(this.write, this.end) DEF AGE AAA HE, XX render 方法 是 在 
初始 化 ReadStream 方法 时 传 入 的 ， 源 人 码 定义 如 下 : 


renderToStream (component: Component): RenderStream { 
return new RenderStream((write, done) => ( 
render(component, write, done) 


}) 


这 个 方法 中 调用 的 render(component,write,done)#ll renderToString 使 用 的 render 方法 是 同一 
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个 ,只 不 过 这 里 的 write 和 done 对 应 的 是 RenderToStream 类 里 定义 的 this.write 和 this.end 方法 。 


7. tryNext 


tryNext 方法 调用 this.nextO Jr KARAS Ve 2H fT o 


最 后 简单 做 一 下 回顾 。 首 先 先 调用 renderToStream(new Vue(option)) 8] 24 stream 对 象 后 ， 
通过 stream.pipe0 方 法 把 数据 发 送 到 一 个 WritableStream 中 ， 会 触发 RenderToStream 内 部 read 
方法 的 调用 ， 不 断 把 演 染 的 组 件数 据 推 入 读 取 队 列 中 ， 这 个 WritableStream 就 可 以 不 断 地 读 取 
到 组 件 的 数据 ， 然 后 输出 。 这 样 就 实现 了 流 式 服务 端 泻 染 技术 。 


18.4 总 结 


本 章 首 先 介 绍 了 Vuejs 2.0 相对 于 1.x 版 本 的 API 变更 ， 让 我 们 了 解 到 Vue.js 2.0 Æ API 设 
计 上 更 加 简洁 ， 新 手 上 手 成 本 更 低 ， 更 易于 掌握 框架 。 接 着 介绍 了 Vuejs 2.0 的 两 大 新 特性 一 一 
Virtual DOM 和 服务 端 泻 染 。 了 解 这 些 技术 的 实现 原理 和 细节 ， 会 对 我 们 今后 使 用 Vue.js 2.0 进 
行 开 发 ， 遇 到 一 些 性 能 优化 的 场景 时 有 一 定 的 帮助 。 


x 19 x 
源码 启 


util 


Vue.js 内 部 封装 了 util， 提 供 了 一 些 常 用 的 工具 方法 。 了 解 本 章 内容 ， 可 以 避免 开发 者 再 额 
外 引用 第 三 方 框架 增加 代码 量 。util 一 共 分 成 6 部 分 : env. dom. components. lang. debug 和 
options， 整 体 结构 如 图 19-1 所 示 。 


I 
ane > = 出 


| env lang | dom | components options debug 


图 19-1 autil 整 体 结构 


19.1 env 


env 如 图 19-2 所 示 。 


( seek | ( ”属性 支持 过 渡 属 性 其 他 | 


inBrowser | hasProto transitionProp nextTick 
isIE9 transitionEndEvent set 
— isAndroid animationProp 
islos — animationEndEvent 
isWechat 


图 19-2 env 
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19.1.1 系统 判断 


1. inBrowser 
判断 是 否 为 浏览 器 环境 ， 源 码 定 义 如 下 : 


<1-- 源 码 目 录 : src/util/env.js 7 行 --> 


export const inBrowser = 


typeof window !== 'undefined' && 
Object.prototype.toString.call(window) !== '[object Object]' 
2. islE9 


判断 是 否 为 IE 9， 源 码 定义 如 下 : 


<!1-- 源 码 目录 : src/util/env.js 16 行 --> 


const UA = inBrowser && window.navigator.userAgent.toLowerCase() 


export const isIE9 = UA && UA.indexOf('msie 9.0') > 0 
3. isAndroid 
判断 是 否 为 安 章 ， 源 人 码 定义 如 下 : 


<!1-- 源 码 目录 : src/util/env.js 17 行 --> 


export const isAndroid = UA && UA.indexOf('android') > 0 
4. islos 
判断 是 否 为 iD0S， 源 码 定义 如 下 : 


<!1-- 源 码 目录 : src/util/env.js 18 行 --> 


export const isIos = UA && /(iphonelipadlipodlios)/i.test (UA) 
5. isWechat 
判断 是 否 为 微 信 ， 源 人 码 定 义 如 下 : 


<!1-- 源 码 目录 : src/util/env.js 19 行 --> 


export const isWechat = UA && UA.indexOf('micromessenger') > 0 


19.1.2 属性 支持 


hasProto 一 一 是 否 文 持 _、proto 属性， 源码 定义 如 下 : 


<!-- 源 码 目录 : src/util/env.js 7 行 --> 


export const hasProto = ' proto__' in {} 
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19.1.3 过渡 属性 


1. transitionProp 
<!1-- 源 码 目录 : src/util/env.js 34 行 --> 


const isWebkitTrans - 


window.ontransitionend --- undefined && 

window.onwebkittransitionend !-- undefined 
const isWebkitAnim - 

window.onanimationend --- undefined && 

window.onwebkitanimationend !-- undefined 
transitionProp = isWebkitTrans 


? 'WebkitTransition': 'transition' 
2. transitionEndEvent 


transitionend 事件 在 CSS 过 渡 完 成 后 触发 。 


注 : 如 果 过 渡 在 完成 前 被 移 除 ， 例 如 CSS transition-property 属性 被 移 除 ， 过 渡 事 件 将 不 被 


触发 i] 


<!1-- 源 码 目录 : src/util/env.js 37 行 --> 


transitionEndEvent = isWebkitTrans? 'webkitTransitionEnd': 'transitionend' 


3. animationProp 


CSS 动画 效果 将 会 影响 元 素 相 对 应 的 ess 值 ， 在 整个 动画 过 程 中 ， 元 素 的 变化 属 
= l'Effi. animation 类 似 于 transition 属 


是 由 animation 控制 的 ， 动 画 后 面 的 属性 值 会 覆盖 前 面 的 属 


性 值 完全 


性 ， 它 们 都 是 随 着 时 间 改 变 元 素 的 属性 值 。 其 主要 区 别 是 transition 需要 触发 一 个 事件 Chover 


a 


BK click 


n 


ESE) 才 会 随时 间 改 变 其 ess 属性 值 ， 而 animation 在 不 需要 


E 


触发 人 


E 何 事件 的 情况 下 


mm 


tan] EA E SO Bit a PNY Tn] 


<!1-- 源 码 目录 : src/util/env.js 40 行 --> 


animationProp = isWebkitAnim? 'WebkitAnimation': 'animation' 


4. animationEndEvent 


animationend 事件 在 CSS 动画 完成 后 触发 。 


<!1-- 源 码 目录 : src/util/env.js 43 行 --> 


变化 来 改变 元 素 的 css 属性 值 ， 从 而 达到 一 种 动画 效果 。 


animationEndEvent = isWebkitAnim? 'webkitAnimationEnd' : 'animationend' 
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19.1.4 nextTick 


不 支持 则 会 回 退 到 setTimeout(fn, 0) 。 当 Vue.nextTick 的 回调 函数 执行 时 ， 


异步 执行 ， 在 Vuejs 内 部 ，Vue.js 会 使 用 MutationObserver 来 实现 队列 的 异步 处 理 ， 如 


的 状态 了 


O cb {Function} 


O ctx {Object} 


<1!-- 源 码 目录 : src/util/env.js 65 4f--> 


(function () { 


var callbacks = [] 


var pending - false 


var timerFunc 


function nextTickHandler () { 


pending = false 
var copies = callbacks.slice(0) 
callbacks - [] 


for (var i = 0; i < copies.length; i++) { 


DOM 已 经 是 更 新 


copies[i]() 
} 
} 
if (typeof MutationObserver !== 'undefined' && ! (isWechat && isIos)) { 
var counter = 1 


var observer = new MutationObserver (nextTickHandler) 
var textNode = document.createTextNode (counter) 
observer.observe (textNode, { 
characterData: true 
} 
timerFunc = function () { 
counter = (counter + 1) % 2 
textNode.data = counter 
} 
else i 
// webpack attempts to inject a shim for setImmediate 


// if it is used as a global, so we have to work around that to 


ES 
后 
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// avoid bundling unnecessary code. 
const context = inBrowser 
? window 
typeof global !== 'undefined' ? global : {} 
timerFunc = context.setImmediate || setTimeout 
} 
return function (cb, ctx) { 
var func = ctx 
? function () { cb.call (ctx) } 
cb 
callbacks.push (func) 
if (pending) return 
pending = true 


timerFunc (nextTickHandler, 0) 


QO 
Vue 实例 的 $nextTick 方法 其 实 调用 的 就 是 此 方法 ， 源 码 定义 如 下 : 


<1!1-- 源 码 目 录 : src/instance/api/dom.js 25 行 --> 


Vue.prototype.$nextTick = function (fn) { 


nextTick(fn, this) 


Vue.js 的 过 渡 动 画 队 列 同样 使 用 此 方法 ， 源 码 定义 如 下 : 


<1!-- 源 码 目 录 : src/transition/queue.js 12 行 --> 


function pushJob (job) { 


queue.push (job) 
if (!queued) { 
queued = true 
nextTick(flush) // flush 方法 为 执行 队列 所 有 方法 ， 在 过 渡 之 前 


Vue.js 的 v-text 指令 中 也 使 用 了 此 方法 ， 源 码 定义 如 下 : 


<!1-- 源 码 目录 : src/derictives/public/model/text.js 111 行 --> 


if (!lazy && isIE9) { 
this.on('cut', function () { 


nextTick(self.listener) 
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} 
this.on('keyup', function (e) { 
if (e.keyCode === 46 || e.keyCode === 8) { 


self.listener() 


TIT 


Bl 
= 


创建 set 简单 对 象 ， 提 
码 定义 如 下 : 


<1!-- 源 码 目 录 : src/util/env.js 131 行 --> 


载 


€ set. add. clear. has 方法 。 目 前 暂时 在 watcher.js 中 使 


if (typeof Set !-- 'undefined' && Set.toString().match(/native code/)) { 
// use native Set when available. 
_Set = Set 
Pelee: 4 
// a non-standard Set polyfill that only works with primitive keys. 
Set = function () { 
this.set = Object.create (null) 
} 
_Set.prototype.has = function (key) { 
return this.set[key] !== undefined 
} 
_Set.prototype.add = function (key) { 
this.set[key] = 1 
} 
_Set.prototype.clear = function () { 


this.set = Object.create (null) 


19.2 dom 


ERER, RAKI 5 部 分 进行 详细 的 讲解 ， 如 图 19-3 所 示 。 


第 19 章 源码 篇 一 一 util 333 


dom 操 作 | | 属性 操作 class 操 作 | | 事件 操作 | 


In. 
& 


[— query [— getAttr setClass | 一 on [— createAnchor 


一 inDoc -一 getBindAttr 一 addClass — ut [— findRef 
before hasBindAttr removeClass | mapNodeRange 
after removeNodeRange 
remove 

- prepend 

[— replace 

[— extractContent 

[— trimNode 


isTemplate 


isFragment 


getOuterHTML 


图 19-3 dom 


19.2.1 dom 操作 


1. query 


查找 dom 元 素 ， 使 用 document.querySelector 方法 返回 文档 中 匹配 指定 CSS 选择 器 的 元 素 
集合 中 的 第 一 个 元 素 〈 兼 容 下 8 及 以 上 版 本 )。 


O el {String|Element} 


<!-- 源 码 目录 : src/util/dom.js 14 行 --> 


function query (el) { 
if (typeof el === 'string') { 
var selector = el 
el = document.querySelector (el) 
if (!el) ( 
process.env.NODE ENV !== 'production' && warn( 


'Cannot find element: ' + selector 
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} 


return el 


2. inDoc 
是 否 在 文档 中 ， 运 用 了 ownerDocument.documentElement 属性 ， 其 中 ownerDocument 是 文 


#4, documentElement 是 根 节 点 ,ownerDocument 下 包含 两 个 节点 , 即 doctype 和 documentElement。 


O node {node} 


<!-- 源 人 码 目录 : src/util/dom.js 39 行 --> 


function inDoc (node) { 


if (!node) return false 
var doc - node.ownerDocument.documentElement 
var parent - node.parentNode 
return doc === node || 
doc === parent || 


!! (parent && parent.nodeType === 1 && (doc.contains (parent))) 


3. before 


在 target 节点 前 插入 el 元 素 。 


O el {Element} 


O target {Element} 


<!--YHiS AS: src/util/dom.js 100 行 --> 
function before (el, target) { 


target.parentNode.insertBefore(el, target) 


4. after 


在 target 节点 后 插入 el 元 素 。 


O el {Element} 


O target {Element} 


<!1-- 源 码 目录 : src/util/dom.js 111 行 --> 
function after (el, target) { 


if (target.nextSibling) { 


第 19 章 


源码 篇 一 一 util 


335 


before(el, target.nextSibling) 
} else { 


target.parentNode.appendChild (el) 


5. prepend 


在 target 节点 最 前 面 插入 el 元 素 。 


O el {Element} 


O target {Element} 


<!1-- 源 码 目录 : src/util/dom.js 136 行 --> 


function prepend (el, target) { 
if (target.firstChild) ( 
before(el, target.firstChild) 
} else T 


target.appendChild (el) 


6. extractContent 


将 元 素 内容 提 取 到 一 个 div 元 素 或 文本 人 碎片 中 (取决 于 asFragment 参数 )。 


O el {Element} 


O asFragment {Boolean} 


<!1-- 源 码 目录 : src/util/dom.js 268 行 --> 


function extractContent (el, asFragment) { 
var child 
var rawContent 
if (isTemplate(el) && isFragment(el.content)) { 
el = el.content 
} 
if (el.hasChildNodes()) { 
trimNode (el) 
rawContent - asFragment 
? document.createDocumentFragment () 
document.createElement ('div') 
while (child = el.firstChild) { 
rawContent.appendChild (child) 
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} 


return rawContent 


Vues 在 组 件 中 内 联 模板 参数 使 用 的 该 方法 ， 将 组 件 中 包含 的 元 素 作 为 内 联 模板 ， 源 码 定 
义 如 下 : 


<!1-- 源 码 目录 : src/directive/internal/component.js 41 行 --> 
bind () 


if (!this.el. vue ) { 
// keep-alive cache 


this.keepAlive - this.params.keepAlive 


if (this.keepAlive) { 
this.cache = {} 
} 
// check inline-template 
if (this.params.inlineTemplate) { 
// extract inline template as a DocumentFragment 


this.inlineTemplate = extractContent(this.el, true) 


用 inlineTemplate 赋值 给 组 件 的 模板 template 属性 ， 源 码 定义 如 下 : 


<!-- 源 码 目录 : src/directive/internal/component.js 201 --> 


T 
pony) 
HE 


build (extraOptions) { 
var cached = this.getCached() 
if (cached) { 
return cached 
} 
if (this.Component) { 
// default options 
var options = { 
name: this.ComponentName, 
el: cloneNode(this.el), 


template: this.inlineTemplate 


if (extraOptions) { 


extend(options, extraOptions) 
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return child 


7. remove 


删除 el 元素。 


O el {Element} 


<!1-- 源 码 目录 : src/util/dom.js 125 行 --> 


function remove (el) { 


el.parentNode.removeChild(el) 


8. replace 
el 元 素 替 换 target. 


O target {Element} 


O el {Element} 


<!1-- 源 码 目录 : src/util/dom.js 151 行 --> 
function replace (target, el) { 
var parent = target.parentNode 
if (parent) { 
parent.replaceChild(el, target) 


9. trimNode 
清除 node 节点 内 首尾 空 文本 或 注释 节点 , 使 用 isTrimmable 判断 是 否 为 空 文本 或 注释 节点 ， 


该 方法 在 模板 解析 中 使 用 最 多 。 


O node {Node} 


<!1-- 源 码 目录 : src/util/dom.js 296 行 --> 


function trimNode (node) { 
var child; 
while (child = node.firstChild, isTrimmable(child)) { 


node.removeChild(child) 
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while (child = node.lastChild, isTrimmable(child)) { 


node.removeChild(child) 


} 
function isTrimmable (node) { 
return node && ( 
(node.nodeType === 3 && !node.data.trim()) || 
node.nodeType === 8 


10. isTemplate 


JEAN template 模板 元 素 。 


O el {Element} 


<!1-- 源 码 目录 : src/util/dom.js 323 行 --> 


function isTemplate (el) { 
return el.tagName && 


el.tagName.toLowerCase() === 'template' 


11. isFragment 


是 否 为 轻 量 级 的 Document 对 象 ， 能 够 容纳 文档 的 茶 个 部 


O node {Node} 


<!1-- 源 码 目录 : src/util/dom.js 431 行 --> 


function isFragment (node) { 


return node && node.nodeType --- 11 


12. getOuterHTML 
获取 元 素 outerHTML， 如 果 不 支 持 则 获取 innerHTML, 


O el {Element} 


<!-- 源 码 目录 : src/util/dom.js 443 行 --> 
function getOuterHTML (el) { 
if (el.outerHTML) { 
return el.outerHTML 


} else { 


分 。 


] div UH WE. 
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var container = document.createElement('div') 
container.appendChild (el.cloneNode (true)) 


return container.innerHTML 


Vue.js 只 用 在 FragmentFactory ! 


<!--YHiS AS: src/fragment/factory.js 17 行 --> 
function FragmentFactory (vm, el) { 
this.vm - vm 
var template 
var isString = typeof el --- 'string' 
if (isString || isTemplate(el) && !el.hasAttribute('v-if')) { 
template = parseTemplate(el, true) 
} else [f 
template = document.createDocumentFragment () 
template.appendChild (el) 
} 
this.template = template 
// linker can be cached, but only for components 
var linker 
var cid = vm.constructor.cid 
if (cid > 0) { 
var cacheld = cid + (isString ? el : getOuterHTML (el) ) 
linker = linkerCache.get (cacheId) 
if (!linker) { 
linker = compile(template, vm.Soptions, true) 
linkerCache.put(cacheId, linker) 
} 
p else r 
linker = compile(template, vm.Soptions, true) 
} 


this.linker = linker 


19.2.2 属性 操作 


1. getAttr 
在 node 元 素 上 获取 并 移 除 _attr 属性 。 
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O node {Node} 


O  arrt {String} 


<!-- 源 人 码 目录 ; 
function getAttr 


src/util/dom.js 55 


(node,  attr) 


var val node.getAttribute( . 
{ 

node.removeAttribute( attr) 
} 


return val 


if (val !== null) 


2. getBindAttr 


获取 : name 或 v-bind:name 的 


O node {Node} 


O name {String} 


<!-- 源 码 目录 ; 
function getBindAttr 


src/util/dom.js 71 


var val = getAttr(node, ':' 十 
if (val === null) { 
val = getAttr(node, 'v-bind 


} 


return val 


(node, name) 


f--» 
{ 
attr) 


生 值 。 


f--» 
{ 


name) 


:' + name) 


此 方法 在 以 下 情况 中 使 用 


: (编译 props 


属性 ; @ 指 令 中 _setupParams 方法 ; @ 获 取 动 态 组 
FP 的 使 用 方法 ， 源 码 定义 如 下 : 


件 is 属性 值 。 我 们 看 一 下 在 指令 9 


e 


<!-- 源 码 目录 : src/directive.js 193 行 --> 
Directive.prototype. setupParams = function 
if (!this.params) { 


return 
} 


var params 


this.params 


this.params 


var i params.length 


var key, val, mappedKey 


while (i--) { 


Object.create (null) 
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key = hyphenate (params [i]) 
mappedKey = camelize (key) 
val = getBindAttr (this.el, key) 
if (val != null) { 
// 为 动态 参数 绑 定 Swatch 方法 
this. setupParamWatcher (mappedKey, val) 
} else { 
// 静态 
val = getAttr (this.el, key) 
if (val != null) { 


this.params[mappedKey] = val --- '' ? true : val 


3. hasBindAttr 


node 元 素 上 是 否 有 绑 定 的 name 属性 


LE 
FEE 
o 


O node {Node} 


O name (String) 


<!1-- 源 码 目录 : src/util/dom.js 87 行 --> 
function hasBindAttr (node, name) { 
return node.hasAttribute(name) || 
node.hasAttribute(':' + name) | | 


node.hasAttribute('v-bind:' + name) 


19.2.3 class 操作 


1. setClass 


ik E class AIRCE IE 9 中 ,如 果 el 元 素 有 :class 属性 , 将 忽略 该 class H 
设置 className 无 效 )。 


性 ; 然而 在 PhantomJS, 


Au 


O el {Element} 


O cls (String) 
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src/util/dom.js 209 行 --> 


<!-- 源 码 目 录 : 
function setClass (el, cls) { 
if (isIE9 && !/svg$/.test(el.namespaceURI)) { 


el.className = cls 


} else { 
el.setAttribute('class', cls) 


返回 元 素 的 类 名 ， 作 为 DOMTokenList 对 象 ， 该 属性 用 
性 是 只 读 的 , 但 我 们 可 以 使 用 add0 和 remove() 


2. addClass 


添加 className， 其 中 classList 属 
于 在 元 素 中 添加 、 移 除 及 切换 CSS 类 。classList 属 
方法 修改 它 (OE 10 及 以 上 版 本 )。 


O 


Q el {Element} 


Q cls {String} 
src/util/dom.js 225 行 --> 
cls) { 


<! --J A ae: 


function addClass (el, 


(el.classList) { 


Tf 
el.classList.add(cls) 
j else I 
var cur = ' ' + getClass(el) + ' ' 
Melsi Po"). oS Oe x 


(cur.indexOf(' 


ds. 
(cur * cls).trim()) 


setClass(el, 


3. removeClass 
删除 el 元 素 的 className, WRA className， 则 移 除 元 素 的 class 


O el {Element} 


O cls (String) 
src/util/dom.js 243 行 --> 
(el, cls) { 


<!-- 源 码 目 录 : 
function removeClass 
(el.classList) 

el.classList.remove (cls) 


if { 
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} else { 
var cur = ' ' + getClass(el) + ' ' 
var tar 二 LS '! 


while (cur.indexOf(tar) >= 0) ( 
cur = cur.replace(tar, ' ') 
} 


setClass(el, cur.trim() ) 


} 
if (!el.className) { 


el.removeAttribute('class') 


19.2.4 事件 操作 


1. on 


el 绑 定 event 事件 监听 〈useCapture 指定 事件 是 否 在 捕获 或 冒 泡 阶段 执行 ，true EI 
柄 在 捕获 阶段 执行 ， 默 认 值 为 false) (IE 9 及 以 上 版 本 ) 


O el {Element} 
O event {String} 
O cb {Function} 


O useCapture {Boolean} 


<!1-- 源 码 目 录 : src/util/dom.js 167 行 --> 


function on (el, event, cb, useCapture) { 


el.addEventListener(event, cb, useCapture) 


在 指令 中 使 用 on 绑 定 事件 的 代码 示例 如 下 ; 


<!-- 源 码 目录 : src/directive.js 296 行 --> 


Directive.prototype.on = function (event, handler, useCapture) { 
on(this.el, event, handler, useCapture) 
; (this. listeners || (this. listeners = [])) 


.push([event, handler]) 
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O el {Element} 
O event {String} 


O cb {Function} 


<!--YRiS AS: src/util/dom.js 179 行 --> 


function off (el, event, cb) { 


el.removeEventListener(event, cb) 


19.25 ”其 他 


1. createAnchor 


创建 一 个 “执行 插入 /删除 锚 点 ”， 使 用 场景 QD 片 段 实例 ; @v-html; @@v-if; @v-for; 


OHW. 
Q content { String } 


Q persist {Boolean} 


<!1-- 源 码 目录 : src/util/dom.js 346 行 --> 
function createAnchor (content, persist) { 
var anchor - config.debug 
? document.createComment (content) 
: document.createTextNode(persist ? ' ' : '') 
anchor. v anchor - true 


return anchor 


v-partial 的 使 用 如 图 19-4 所 示 ， 其 他 的 使 用 类 似 。 
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t\vue\Vue\node_modules\vue\src\directives\element\partial.js: 
import { PARTIAL } from '../priorities' 


import 


replace, 
resolveAsset 


ind () { 
this.anchor = [createAnchorj( ' v-partial') 
replace(this.el, this.anchor) 
this.insert(this.params.name) 


图 19-4 createAnchor 


2. findRef 
在 node 元 素 中 找到 v-ref 绑 定 的 值 。 


O node {Element} 


<!-- 源 码 目录 : src/util/dom.js 361 行 --> 


var refRE = /^v-ref:/ 


export function findRef (node) { 


if (node.hasAttributes()) { 
var attrs - node.attributes 
for (var i= 0, 1 = attrs.length; i < 1; i++) { 
var name - attrs[i].name 
if (refRE.test(name)) { 


return camelize(name.replace(refRE, '')) 


3. mapNodeRange 
在 范围 兄弟 节点 内 调用 op 函数 。 


O node {Node} 
O end {Node} 


O op {Function} 


<!-- 源 码 目录 : src/util/dom.js 382 行 --> 


function mapNodeRange (node, end, op) { 


var next 


while (node !== end) { 
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next = node.nextSibling 
op (node) 
node - next 

} 

op (end) 


4. removeNodeRange 


依次 移 除 范围 内 兄弟 元 素 并 移入 frag 元 素 中 ， 其 中 用 到 了 过 渡 中 的 remove WithTransitio 77 
法 ， 整 体 移 除 完毕 后 调用 回调 函数 。 


n 
H 
d 


O start {Node} 

O end {Node} 

O vm {Vue} 

O frag {DocumentFragment} 


O cb {Function} 


<1-- 源 码 目录 : src/util/dom.js 404 行 --> 


function removeNodeRange (start, end, vm, frag, cb) { 
var done - false 
var removed = 0 
var nodes = [] 
// 获取 start Bend 的 所 有 兄弟 元 素 
mapNodeRange (start, end, function (node) { 
if (node === end) done = true 
nodes.push (node) 
removeWithTransition (node, vm, onRemoved) 
} 
function onRemoved () { 
removedt++ 
if (done && removed >= nodes.length) { 
for (var i = 0; i < nodes.length; i++) { 
frag.appendChild (nodes[il) 
} 
cb && cb() 
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19.3 lang 


lang 如 图 19-5 所 示 。 


EE -u- ERN © | © 3 _o 
对 象 操作 | 数组 操作 | | ”类 型 转换 | 方法 绑 定 | 名 称 转换 | | 其 他 
set indexOf _toString bind classify debounce 
del | toNumber hyphenate stripQuotes 
| 一 hasOwn | 一 toBoolean -一 camelize — ancellable 
L— extend I toArray —— looseEqual 
| 一 isObject | 一 isLiteral 
isPlainObject isReservled 
— def 
图 19-5 lang 


19.3.1 对象 操作 


1. set 
设置 对 象 属性 ， 添 加 新 属性 触发 更 新 。 


O obj {Object} 
O key (String) 


Q val { * } 


<!1-- 源 码 目录 : src/util/lang.js 12 行 --> 


function set (obj, key, val) { 
if (hasOwn(obj, key)) { // 如 果 是 自 有 属性 ， 为 属性 赋值 ， 返 回 
obj [key] = val 
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return 

} 

if (obj. isVue) {// 是 vue 实例 ， 递 归 调 用 该 函数 
set(obj. data, key, val) 


return 

} 

var ob = obj. ob _ 

if (!ob) (// 不 是 被 监测 对 象 ， 将 val 赋值 到 obj [key] 
obj [key] = val 
return 


} 
// 是 被 监测 对 象 
ob.convert(key, val)// defineProperty 
ob.dep.notify() 
if (ob.vms) { 
var i = ob.vms.length 
while (i--) { 
var vm = ob.vms[i] 
vm. proxy (key) 


vm. digest() 


} 


return val 


2. del 
删除 对 象 属性 ， 触 发 更 新 。 


如 


O obj {Object} 


O key (String) 


<!1-- 源 码 目录 : src/util/lang.js 46 行 --> 
function del (obj, key) { 
if (!hasOwn(obj, key)) { 
return 
} 
delete obj [key] 


var ob = obj. ob __ 
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if (!ob) { 
if (obj. isVue) { 
delete obj. data[key] 
obj. digest() 
} 
return 


} 


ob.dep.notify() 


if (ob.vms) ( 
var i = ob.vms.length 
while (i--) 


{ 
var vm 


ob.vms[i] 
vm. unproxy(key) 


vm. digest() 


3. hasOwn 
判断 是 否 为 


"n 


^d a 


O obj {Object} 


O key (String) 
<!-- 源 码 


EX 


src/util/lang.js 78 行 --> 
function hasOwn 


(obj, key) { 
return Object.prototype.hasOwnProperty.call(obj, key) 
} 

4. extend 

扩展 对 象 属 


ni 
pany 
ES 


Q to {Object} 


O from {Object} 
<!-- 源 码 


EX 


src/util/lang.js 260 行 --> 
function extend (to, 
var keys 


from) { 
Object.keys(from) 
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var i = keys.length 
while (i--) ( 

to[keys[i]] = from[keys[i]] 
} 


return to 


5. isObject 
是 否 为 对 象 。 


O obj {*} 


<!--YRiS AS: src/util/lang.js 278 行 --> 
function isObject (obj) { 
return obj !== null && typeof obj === 'object' 


6. isPlainObject 
是 否 为 对 象 字面 量 。 


O obj{*} 


<!1-- 源 码 目录 : src/util/lang.js 292 行 --> 


var toString = Object.prototype.toString 
var OBJECT STRING - '[object Object]' 
function isPlainObject (obj) { 


return toString.call(obj) === OBJECT STRING 


7. def 
将 属性 添加 到 对 象 ， 或 修改 现 有 属性 的 特性 。 关 于 Object.defineProperty 详 见 30.3 节 。 


O obj {Object} 
O key (String) 
Q val { * } 


O enumerable {Boolean} 


<!-- 源 码 目录 : src/util/lang.js 314 行 --> 


function def (obj, key, val, enumerable) { 
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Object.defineProperty(obj, key, { 
value: val, 
enumerable: !!enumerable, 
writable: true, 
configurable: true 
} 
}} 


19.3.2 ”名 称 转换 


1. classify 
将 -、_、/ 的 命名 转换 成 驼峰 命名 方式 。 


O str {String} 


<!1-- 源 码 目录 : src/util/lang.js 212 行 --> 
var classifyRE = /(?:^|[- M ]) (Nw) /g 


function classify (str) { 


return str.replace(classifyRE, toUpper) 


2. hyphenate 
将 驼峰 命名 方式 转换 为 -。 


O str {String} 


<!-- 源 码 目录 : src/util/lang.js 193 行 --> 
var hyphenateRE = /([a-z\d]) ([A-Z])/g 


export function hyphenate (str) { 
return str 
.replace(hyphenateRE, '$1-$2') 


.toLowerCase() 


3. camelize 
将 -命名 方式 转换 驼峰 式 。 


O str {String} 


<!1-- 源 码 目录 : src/util/lang.js 176 行 --> 


var camelizeRE = /-(Nw)/g 
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export function camelize (str) { 


return str.replace(camelizeRE, toUpper) 


19.3.8 ”数组 操作 


indexOf 一 一 返回 obj 在 Array 中 的 索引 位 置 ， 没 有 则 返回 -1 。 
O arr (Array) 


O obj {*} 


<!--YRIG AS: src/util/lang.js 363 行 --> 


function indexOf (arr, obj) { 


var i = arr.length 
while (i--) { 
if (arr[i] === obj) return i 


} 


return -1 


19.3.4 ”类 型 转换 


1. _toString 
FERH. 


Q Value { * } 


<!1-- 源 码 目录 : src/util/lang.js 114 行 --> 


function  toString (value) { 
return value -- null 


2 01! 


: value.toString() 


2. toNumber 


Q Value { * } 


<!1-- 源 码 目录 : src/util/lang.js 128 行 --> 
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function toNumber (value) { 


if (typeof value !== 'string') 


return value 
} else { 
var parsed = Number (value) 
return isNaN (parsed) 
? value 


parsed 


3. toBoolean 
布尔 转换 。 


O Value {*} 


<!-- 源 码 目录 : src/util/lang.js 146 行 --> 


function toBoolean (value) { 
return value --- 'true' 
T trus 
value --- 'false' 
? false 


value 


4. toArray 
数组 转换 。 


O Value { * } 


<!--YRiS AS: src/util/lang.js 243 行 --> 


function toArray (list, start) 
start = start || 0 
var i = list.length - start 
var ret - new Array(i) 
while (i--) { 
ret[i] = list[i + start] 
} 


return ret 


{ 


{ 
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19.3.5 FASE 


bind 一 一 方法 绑 定 。 
O fn { Function } 


Q ctx {Object} 


<!1-- 源 码 目录 : src/util/lang.js 224 {f--> 


function bind (fn, ctx) { 
return function (a) { 
var l - arguments.length 
return 1 
edt coe." 
? fn.apply(ctx, arguments) 
fn.call(ctx, a) 


fn.call(ctx) 


19.3.6 ”其 他 


1. debounce 


此 方法 只 用 于 input 输入 后 ，wait 毫秒 后 调用 func 方法 。 


O func {Function} 


O wait {Number} 


<!-- 源 码 目录 : src/util/lang.js 332 行 --> 


function debounce (func, wait) { 
var timeout, args, context, timestamp, result 
var later = function () { 
var last = Date.now() - timestamp 
if (last < wait && last >= 0) { 
timeout = setTimeout(later, wait - last) 
} else 4 
timeout = null 
result = func.apply (context, args) 


if (!timeout) context = args = null 
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} 
return function () { 
context = this 
args = arguments 
timestamp = Date.now() 
if (!timeout) { 
timeout - setTimeout(later, wait) 
} 


return result 


2. stripQuotes 


去 除 str 中 的 前 后 引号 。 


O str {String} 


<!-- 源 码 目录 : src/util/lang.js 161 行 --> 
function stripQuotes (str) { 
var a = str.charCodeAt (0) 
var b = str.charCodeAt(str.length - 1) 
return a === b && (a === 0x22 || a === 0x27) 
? str.slice(1, -1) 


str 


3219-1 字符 表 


全 角 字 符 Unicode 半角 字符 Unicode 


"空格 +3000 "NZS +0020 


+0021 


+0022 


+0023 


+0024 


+0025 


+0026 


+0027 
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Unicode 半角 字符 Unicode 


U+0028 


U+0029 


U+002a 


U+002b 


也 可 以 通过 String.fromCharCode() 方 法 来 完成 。 
3. cancellable 


可 以 撤销 的 异步 


H 


调 函 数 。 


O fn {Function} 


<!-- 源 码 目录 : src/util/lang.js 378 行 --> 


function cancellable (fn) { 
var cb - function () ( 
if (!cb.cancelled) ( 


return fn.apply(this, arguments) 


} 

cb.cancel = function () { 
cb.cancelled = true 

} 


return cb 


4. looseEqual 
判断 a lb 是 否 相 等 ( 非 严格 意义 上 的 = 一 )。 
O aí*j 


O b{*} 


<1!-- 源 码 目录 : src/util/lang.js 399 行 --> 


function looseEqual (a, b) { 
/* eslint-disable eqeqeq */ 
return a -- II ( 
isObject(a) && isObject (b) 
? JSON.stringify(a) === JSON.stringify (b) 


false 
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) 
/* eslint-enable eqeqeq */ 


5. isLiteral 


仿 查 表达 式 是 否 为 字面 量 。 


O exp (String) 


<!1-- 源 码 目录 : src/util/lang.js 90 行 --> 
var literalValueRE = /^Ns?(true|false|-?[NdN.]*| ' [^']*' | " [^"] *") Ns?$/ 
function isLiteral (exp) { 


return literalValueRE.test (exp) 


6. isReserved 


检查 str 是 否 以 $ 或 Fko 


O str ( String } 


<!1-- 源 码 目录 : src/util/lang.js 101 行 --> 
function isReserved (str) { 
var c = (str + '').charCodeAt (0) 
return c === 0x24 || c === Ox5F 


19.4 components 


components 如 图 19-6 所 示 。 


commonTagRE | j reservedTagRE 7 [. checkComponentAttr i 


图 19-6 components 


1. commonTagRE 


是 否 为 普通 元 素 。 
<!-- 源 码 目录 : src/util/components.js 5 行 --> 
commonTagRE = 


/^(div|plspanlimgla|lbli|lbr|ullol|li|h1|h2|h3|h4|h5|h6|codel|prel|table|th| 
td|tr|form|label|input|select|option|nav|article|section|header|footer)$/i 


358 Vue.js 权威 指南 


2. reservedTagRE 


是 否 为 自 定义 元 素 。 


<1!-- 源 码 目录 : src/util/components.js 6 行 --> 


reservedTagRE = /*(slot|partial|component) $/i 
3. checkComponentAttr 
Wf el 是 否 为 组 件 ， 如 果 是 则 返回 组 件 id。 


O el {Element} 


O options {Object} 


<!-- 源 码 目录 : src/util/components.js 37 4f--> 


function checkComponentAttr (el, options) { 


var tag = el.tagName.toLowerCase() 
var hasAttrs = el.hasAttributes () 
// 如 果 不 是 普通 元 素 ， 不 是 内 置 自 定义 元 素 
if (!commonTagRE.test(tag) && !reservedTagRE.test(tag)) { 
// 如 果 options['components'] [tag] (内 部 会 对 tag 做 名 称 转换 ) 存在 


if (resolveAsset(options, 'components', tag)) { 


return { id: tag } 
j else I 
// getIsBinding 获取 el TH b is 绑 定 的 组 件 名 称 
var is = hasAttrs && getIsBinding(el, options) 


if (is) ( 


return is 
) else if (process.env.NODE ENV !-- 'production') { 
var expectedTag - 
options. componentNameMap && 
options. componentNameMap[tag] 
if (expectedTag) { 
warn( 
"Unknown custom element: <' + tag + "> - ' + 
"did you mean <' + expectedTag + '>? ' + 
"HTML is case-insensitive, remember to use kebab-case in templates.' 
) 
} else if (isUnknownElement(el, tag)) { 
warn ( 
‘Unknown custom element: <' + tag + "> - did you ' + 


"register the component correctly? For recursive components, ' + 
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'make sure to provide the "name" option.' 


} 
} else if (hasAttrs) { 
// getIsBinding 获取 el 元 素 上 is 绑 定 的 组 件 名 称 


return getIsBinding(el, options) 


19.5 options | 


| mergeOptions | | resolveAsset 


顾名思义 ， 本 节 介 绍 参 数 相关 操作 ， 如 图 19-7 所 示 。 图 19-7 options 
1. mergeOptions 


此 方法 的 核心 是 strats 对 象 ， 因 此 我 们 先 来 看 一 下 strats 对 象 里 面 有 什么 ， 如 图 19-8 所 示 。 


aS ea Cr) ara) 


I— data I— props | 一 watch I— init 
| | 一 methods — events | 一 created 
-一 computed I— ready 
- attached 


[— detached 


| 一 beforeCompile 


— compiled 


| 一 beforeDestory 


activate 


—— destroyed 


图 19-8 strats 
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接 下 来 我 们 看 看 方法 都 是 怎么 实现 的 。 


(1) data (ULI 19-9) 


* Y $ 
*  retum cv ) 
- 4 


x 
EIE IN: function mergedinstanceDataFn () ( 
x I| deData 为 pv 转换 值 ，deData 为 cv 转换 值 


retum mergeData(instData, deData) 
}else { 
return defaultData 


return function(}{ 


return mergeData{ 
cv.call(this); 


pv.call(this); 


图 19-9 data 


(2) el〈 见 图 19-10) 


| return ret.call(vm) | 


图 19-10 el 


-- 
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G) 钩子 函数 〈 见 图 19-11) 


Y 
| return cv | = return [cv] - 
图 19-11 FK 


(4) props & methods & computed (Ji, E] 19-12) 


var ret = Object.create(null) 
extend(ret, parentVal) 
extend(ret, childVal) 


图 19-12 prop 
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(5) watch & events ( ILE] 19-13) 


pm | 
* retumpy X— — — ——« lev x 
w ; ls. ai á 
: Y AR 
+  retumcv — X*————————&« ž ipw Sx 
- TO x 
yw 
ret = {}; i 
extend(ret, pv) 


y 

for (var key in childVal) { 
var parent = ret[key] 
var child 7 childVal[key] 


f n if (parent && lisArray(parent)) ( 
| return ret 4 parent = [parent] * 


) 
ret[key] = parent 
? parent.concat(child) 
: [child] 
) 


X J 


图 19-13 watch 


看 完 上 面 的 starts 对 象 ， 我 们 再 看 源 代码 会 更 清晰 一 些 。 


O parent {Object} 
O child {Object} 


O vm {Vue} 


<!-- 源 码 目录 : src/util/components.js 325 行 --> 


function mergeOptions (parent, child, vm) { 
guardComponents (child) // 确保 child.components 有 正确 的 数据 格式 
guardProps (child)// 确保 child.props 被 规范 化 为 基于 对 象 的 格式 
if (process.env.NODE ENV !-- 'production') { 


if (child.propsData && !vm) { 


warn('propsData can only be used as an instantiation option.') 
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var options = {} 
var key 
// 递 归 
if (child.extends) { 

parent - typeof child.extends --- 'function' 

? mergeOptions(parent, child.extends.options, vm) 
mergeOptions(parent, child.extends, vm) 

} 
// 递归 
if (child.mixins) { 

for (var i = 0, 1 = child.mixins.length; i « 1; i++) { 


parent = mergeOptions (parent, child.mixins[i], vm) 


} 
for (key in parent) { 
mergeField (key) 
} 
for (key in child) { 
if (!hasOwn(parent, key)) { 
mergeField(key) 


} 
function mergeField (key) { 

var strat = strats[key] || defaultStrat 

options[key] = strat(parent[key], child[key], vm, key) 
} 


return options 


2. resolveAsset 


如 果 options[type][id]〈 内 部 会 对 tag 做 名 称 转换 ) 存在 ， 则 返回 ;否则 返回 false. 


<!1-- 源 码 目录 : src/util/components.js 372 行 --> 


function resolveAsset (options, type, id, warnMissing) ( 
if (typeof id !== 'string') { 
return 
} 
var assets = options[type] 


var camelizedId 


364 ”Vue.js 权威 指南 


var res = assets[id] || 
// camelCase ID 
assets[camelizedId = camelize(id)] || 
// Pascal Case ID 


assets[camelizedId.charAt(0).toUpperCase() + camelizedId.slice(1)] 


if (process.env.NODE ENV !-- 'production' && warnMissing && !res) { 
warn( 
'Failed to resolve ' + type.slice(0, -1) + ': ' + id, 
options 


} 


return res 


19.6 debug 


warn 一 一 使 用 console.error 输出 警告 信息 。 


<!1-- 源 码 目录 : src/util/warn.js 7 行 --> 


let warn 


let formatComponentName 


if (process.env.NODE ENV !-- 'production') { 
const hasConsole = typeof console !-- 'undefined' 
warn = (msg, vm) => ( 


if (hasConsole && (!config.silent)) { 


console.error('[Vue warn]: ' + msg + (vm ? formatComponentName (vm) : '')) 


} 

formatComponentName = vm => { 
var name = vm. isVue ? vm.$options.name : vm.name 
return name 


? ' (found in component: «' + hyphenate(name) + '>)' 
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EAH, AY (Model) 只 


3 nm 


Vue.js 最 显著 的 功能 就 是 响应 式 系统 ， 它 是 一 个 典型 的 MVVM fH 
普通 的 JavaScript 对 象 ， 修 改 它 则 视图 View) 会 自动 更 新 。 这 种 设计 让 状态 管理 变 得 非常 简 
比 常见 问题 。 下 面 让 我 们 深 控 Vue.js 响应 


也 很 重要 ， 可 以 避免 一 些 
建立 起 关联 关系 的 。 


直观 ， 不 过 理解 它 的 原型 
看 Vuejs 是 如 何 把 模型 和 视图 


单 而 
式 系 统 的 细节 ， 来 看 


20.1 如 何 追 踪 变 化 


我 们 先 来 看 一 个 简单 的 例子 。 代 码 示 例如 下 : 


<div id="main"> 
{ {times} }</h1> 


«hl»count: 
</div> 
<script src="vue.js"></script> 
<script> 

var vm = new Vue({ 

el: '#main', 
data: function () { 
return { 
times: 1 
}; 


Fy 
created: function () { 


var me = this; 
setInterval (function () { 
me.times++; 


fe 1000)? 
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} 
)); 
«/script» 
运行 后 ， 我 们 可 以 从 页 面 中 看 到 ，count 后 面 的 times 每 阳 1s 递增 1， 视 图 一 直 在 更 新 。 
代码 中 仅仅 是 通过 setInterval 方法 每 隔 1s 来 修改 vm.times 的 值 ， 并 没有 任何 DOM RE. I 
Vuejs 是 如 何 实现 这 个 过 程 的 呢 ? 我 们 可 以 通过 一 张 图 来 看 一 下 ， 如 图 20-1 所 示 。 


在 
么 


addDep we Y 
f depend 


update p 
update Watcher d 


Directive — | — ^ ——— å 
times 


v-text=“times” 


Dom 
{{times}} 


图 20-1 模型 和 视图 关联 关系 图 


图 中 的 模型 (Model) 就 是 data 方法 返回 的 {times:1}， 视 图 (View) 是 最 终 在 浏览 器 中 显 
示 的 DOM。 模 型 通过 Observer. Dep. Watcher. Directive 等 一 系列 对 象 的 关联 ， 最 终 和 视图 建 
立 起 关系 。 归 纳 起 来 ，Vue.js 在 这 里 主要 做 了 三 件 事 : 


O 通过 Observer 对 data 做 监听 ， 并 且 提 供 了 订阅 某 个 数据 项 变化 的 能 


O 把 template 编译 成 一 段 document fragment， 然 后 解析 其 中 的 Directive， 得 到 每 一 个 
Directive 所 依赖 的 数据 项 和 update 方法 。 


O 通过 Watcher 把 上 述 两 部 分 结合 起 来 , 即 把 Directive 中 的 数据 依赖 通过 Watcher 订阅 在 
对 应 数据 的 Observer 的 Dep 上 。 当 数据 变化 时 ， 就 会 触发 Observer 的 Dep 上 的 notify 
方法 通知 对 应 的 Watcher 的 update, 进而 触发 Directive 的 update 方法 来 更 新 DOM 视图 ， 
最 后 达到 模型 和 视图 关联 起 来 。 


接 下 来 我 们 就 结合 Vue.js 的 源码 来 详细 介绍 这 三 个 过 程 。 
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20.1.1 Observer 


首先 来 看 一 下 Vue.js 是 如 何 给 data 对 象 添加 Observer 的 。 我 们 知道 ，Vue 实例 创建 的 过 程 
会 有 一 个 生命 周期 ， 其 中 有 一 个 过 程 就 是 调用 vm. initData 方法 处 理 data 选项 。 initData 方法 
的 源码 定义 如 下 : 


<!-- 源 码 目录 : src/instance/internal/state.js--» 


Vue.prototype. initData = function () { 
var dataFn = this.Soptions.data 
var data = this. data = dataFn ? dataFn() : {} 
if (!isPlainObject(data)) { 
data = {} 
process.env.NODE ENV !== 'production' && warn ( 
‘data functions should return an object.', 


this 


} 
var props = this. props 
// proxy data on instance 
var keys = Object.keys (data) 
var i, key 
i = keys.length 
while (i--) { 
key = keys[i] 
// there are two scenarios where we can proxy a data key: 
// 1. it's not already defined as a prop 
// 2. it's provided via a instantiation option AND there are no 
// template prop present 
if (!props || !hasOwn(props, key)) { 
this. proxy (key) 


) else if (process.env.NODE ENV !-- 'production') { 
warn( 
"Data field "' + key + '" is already defined ' + 
"as a prop. To provide default value for a prop, use the "default" ' + 


'prop option; if you want to pass prop values to an instantiation ' 十 
'call, use the "propsData" option.', 


this 
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} 
// observe data 


observe (data, this) 


在 initData 中 我 们 要 特别 注意 proxy 方法 ， 它 的 功能 就 是 遍历 data 的 key, JE data 上 的 属 
性 代理 到 vm 实例 上 。 proxy 方法 的 源码 定义 如 下 : 


<!-- 源 码 目 录 : src/instance/internal/state.js--> 


Vue.prototype. proxy = function (key) { 
if (!isReserved(key)) { 
// need to store ref to self here 
// because these getter/setters might 
// be called by child scopes via 
// prototype inheritance. 
var self = this 
Object.defineProperty(self, key, { 
configurable: true, 
enumerable: true, 
get: function proxyGetter () { 
return self. data[key] 
), 
set: function proxySetter (val) { 


self. data[key] - val 


proxy 方法 主要 通过 Object.defineProperty 的 getter 和 setter 方法 实现 了 代理 。 在 前 面 的 例 
子 中 ， 我 们 调用 vm.times 就 相当 于 访问 了 vm. data.times. 


在 initData 方法 的 最 后 ， 我 们 调用 了 observe(data, this) 方 法 来 对 data 做 监听 。observe 方法 
的 源码 定义 如 下 : 


<1!-- 源 码 目录 : src/observer/index.js--» 


export function observe (value, vm) { 
if (!value || typeof value !-- 'object') { 


return 


var ob 
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KE 


hasOwn(value, ' ob ') && 


value. ob instanceof Observer 
1-4 

ob = value. ob . 
) else if ( 


shouldConvert && 


(isArray(value) || isPlainObject(value)) && 
Object.isExtensible(value) && 
!value. isVue 
)- d 
ob = new Observer (value) 
} 
if (ob && vm) { 
ob.addVm (vm) 
} 
return ob 
} 
observe 方法 首先 判断 value 是 否 已 经 添加 了 __ob Jt 
如 果 是 就 直接 用 ， 否 则 在 value 满足 一 些 条 件 〈 数 组 或 对 象 、 


创建 一 个 Observer 对 象 。 接 下 来 我 们 看 一 下 Observer 这 个 类 ， 


<!-- 源 码 目录 : 


export function Observer 


src/observer/index.js--» 


(value) { 


this.value value 


this.dep 


new Dep() 


def (value, ' ob ', this) 


if (isArray(value)) { 
var augment - hasProto 
? protoAugment 
copyAugment 
augment(value, arrayMethods, arrayKeys) 


this.observeArray (value) 


else { 


this.walk(value) 


Observer 


象 我们 稍 后 作 介 


类 的 构造 函数 主要 做 了 这 么 儿 件 事 : 
ri); 然后 把 自身 this 添加 到 value 的 


H 


ob 


E， 它 是 一 个 Observer 对 象 的 实例 。 
可 扩展 、 非 vue 组 件 等 ) 的 情况 下 
它 的 源码 定义 如 下 : 


f 先 创建 了 一 个 Dep 对 象 实例 CRF Dep 对 


属性 上 ; 最 后 对 value 的 类 型 进行 


370 ”Vue.js 权威 指南 


判断 ， 如 果 是 数组 则 观察 数组 ， 否 则 观察 单个 元 素 。 其 实 observeArray 方法 就 是 对 数组 进行 遍 
Dis HHHH observe 方法 ， 最 终 都 会 调用 walk 方法 观察 单个 元 素 。 接 下 来 我 们 看 一 下 walk 
方法 ， 它 的 源码 定义 如 下 : 


<1!-- 源 码 目录 : src/observer/index.js--> 


Observer.prototype.walk = function (obj) { 
var keys = Object.keys (obj) 
for (var i= 0, 1 = keys.length; i < 1; i++) { 


this.convert (keys[i], obj[keys[i]] 


nll 


walk 方法 是 对 obj 的 key 进行 遍历 , 依次 调用 convert 方法 , 对 obj 的 每 一 个 属性 进行 转换 ， 
让 它们 拥有 getter. setter 方法 。 只 有 当 obj 是 一 个 对 象 时 ， 这 个 方法 才能 被 调用 。 接 下 来 我 们 
看 一 下 convert 方法 ， 它 的 源码 定义 如 下 : 


<1!-- 源 码 目录 : src/observer/index.js--> 


Observer.prototype.convert = function (key, val) { 


defineReactive(this.value, key, val) 


convert 方法 很 简单 , 它 调用 了 defineReactive 方法 。 这 里 this.value 就 是 要 观察 的 data WR, 
key 是 data 对 象 的 某 个 属性 ，val 则 是 这 个 属性 的 值 。defineReactive 的 功能 是 把 要 观察 的 data 
对 象 的 每 个 属性 都 赋予 getter 和 setter 方法 。 这样 一 旦 属性 被 访问 或 者 更 新 , 我 们 就 可 以 追踪 到 
这 些 变 化 。 接 下 来 我 们 看 一 下 defineReactive 方法 ， 它 的 源码 定义 如 下 : 


<1!-- 源 码 目录 : src/observer/index.js--» 


n 


4 


export function defineReactive (obj, key, val) { 
var dep = new Dep() 
var property = Object.getOwnPropertyDescriptor(obj, key) 
if (property && property.configurable === false) { 
return 
} 
// cater for pre-defined getter/setters 
var getter = property && property.get 
var setter = property && property.set 
var childOb = observe (val) 
Object.defineProperty(obj, key, { 
enumerable: true, 
configurable: true, 


get: function reactiveGetter () { 
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Var Value = 
if (Dep.target) 
dep.depend() 


if (childOb) 


getter ? getter.call(obj) 
{ 


: val 


childOb.dep.depend() 


} 


if (isArray(value)) { 
for (var e, i = 0, 1 = value.length; i < 1; i++) { 
e = value[i] 
e && e. ob && e. ob .dep.depend() 
} 
} 
} 
return value 
), 
Set: function reactiveSetter (newVal) { 
var value = getter ? getter.call(obj) : val 
if (newVal === value) { 
return 
} 
if (setter) { 
setter.call (obj, newVal) 
人 
val = newVal 
} 
childOb = observe (newVal) 
dep.notify() 
} 
} 
} 
defineReactive 方法 最 核心 的 部 分 就 是 通过 调 ) 


加 getter 和 setter 方法 
x 时 调用 dep.depend 和 childObj.dep.depend 方法 做 依赖 

历 这 个 数组 收集 数组 元 素 的 依赖 。 当 改变 data 的 属性 
1H。 这 里 我 们 提 到 了 dep， 它 是 Dep 对 象 的 实例 。 


KHZ 
W) 3i 


Dep 这 个 类 ， 
<!-- 源 码 


K: 


export default function Dep 


o 


用 pn FIVE HEAT WL 
它 的 源码 定义 如 下 : 


src/observer/dep.js--> 


当 data 的 某 个 属性 被 访问 时 ， 则 会 


Object.defineProperty 给 data 的 每 个 属性 添 
Ai) 


1 getter 方法 ， 判 断 当 Dep.target 


O í 


改 集 。 如 果 访 问 的 属性 是 一 个 数组 ， 
时 ， 则 会 调用 setter 方法 ， 这 时 调 
接 下 来 我 们 看 一 下 
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this.id = uid+t+ 
this.subs = [] 
} 
// the current target watcher being evaluated. 
// this is globally unique because there could be only one 
// watcher being evaluated at any time. 


Dep .target = null 

Dep 类 是 一 个 简单 的 观察 者 模式 的 实现 。 它 的 构造 函数 非常 简单 ， 初 始 化 了 id 和 subs。 其 
中 subs 用 来 存储 所 有 订阅 它 的 Watcher, Watcher 的 实现 稍 后 我 们 会 介绍 。Dep.target 表示 当前 
正在 计算 的 Watcher， 它 是 全 局 唯一 的 ， 因 为 在 同一 时 间 只 能 有 一 个 Watcher 被 计算 。 


前 面 提 到 了 在 getter 和 setter 方法 调用 时 会 分 别 调用 dep.depend 方法 和 dep.notify 方法 ， 接 
下 来 依次 介绍 这 两 个 方法 。depend 方法 的 源码 定义 如 下 : 


<!-- 源 码 目录 : src/observer/dep.js--» 


Dep.prototype.depend = function () { 
Dep.target.addDep (this) 


depend 方法 很 简单 ， 它 通过 Dep.targetaddDep(this) 方 法 把 当前 Dep 的 实例 添加 到 当前 正在 
计算 的 Watcher 的 依赖 中 。 接 下 来 我 们 看 一 下 notify 方法 ， 它 的 源码 定义 如 下 : 


<!-- 源 码 目录 : src/observer/dep.js--» 


Dep.prototype.notify = function () { 
// stablize the subscriber list first 
var subs = toArray(this.subs) 


for (var i= 0, 1 = subs.length; i < 1; i++) { 


subs [i] .update () 


notify 方法 也 很 简单 ， 它 遍历 了 所 有 的 订阅 Watcher， 调 用 它们 的 update 方法 。 


至 此 ，vm 实例 中 给 data 对 象 添加 Observer 的 过 程 就 结束 了 。 接 下 来 我 们 看 一 下 Vuejs 是 
如 何 进行 指令 解析 的 。 


20.1.2 Directive 


Vue 指令 类 型 很 多 ， 限 于 篇 幅 ， 我 们 不 会 把 所 有 指令 的 解析 过 程 都 介绍 一 过， 这 里 结合 前 
面 的 例子 只 介绍 v-text 指令 的 解析 过 程 ， 其 他 指令 的 解析 过 程 也 大 同 小 异 。 
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前 面 我 们 提 到 了 Vue 实例 创建 的 生命 周期 ， 在 给 data 添加 Observer 之 后 ， 有 一 个 过 程 是 调 


用 vm. compile 方法 对 模板 进行 编译 。_compile 方法 的 源码 定义 如 下 : 


<!-- 源 码 目录 : src/instance/internal/lifecycle.js--» 


Vue.prototype. compile = function (el) { 
var options = this.Soptions 
// transclude and init element 
// transclude can potentially replace original 
// so we need to keep reference; this step also injects 
// the template and caches the original attributes 
// on the container node and replacer node. 
var original = el 
el = transclude(el, options) 
this. initElement (el) 


// handle v-pre on root node (42026) 


if (el.nodeType === 1 && getAttr(el, 'v-pre') !-- null) { 
return 
} 
// root is always compiled per-instance, because 
// container attrs and props can be different every time. 
var contextOptions = this. context && this. context.$options 
var rootLinker = compileRoot(el, options, contextOptions) 
// resolve slot distribution 
resolveSlots (this, options. content) 
// compile and link the rest 
var contentLinkFn 
var ctor - this.constructor 
// component compilation can be cached 
// as long as it's not using inline-template 
if (options. linkerCachable) ( 
contentLinkFn = ctor.linker 
if (!contentLinkFn) { 


contentLinkFn = ctor.linker = compile(el, options) 


} 

// link phase 

// make sure to link root with prop scope! 

var rootUnlinkFn = rootLinker(this, el, this. scope) 


var contentUnlinkFn = contentLinkFn 
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? contentLinkFn(this, el) 
compile(el, options) (this, el) 
// register composite unlink function 
// to be called during instance destruction 
this. unlinkFn = function () { 
rootUnlinkFn () 
// passing destroying: true to avoid searching and 
// splicing the directives 
contentUnlinkFn (true) 
} 
// finally replace original 
if (options.replace) { 
replace(original, el) 
} 
this. isCompiled = true 


this. callHook('compiled') 


我 们 可 以 通过 图 20-2 来 看 一 下 这 个 方法 编译 的 主要 流程 。 


transclude s 
vm. compile _initElement 
element 


compileRoot 


compile resolveSlot 


图 20-2” vm. compile 编 译 主要 流程 图 


这 个 过 程 通过 el = transclude(el, option) 方 法 把 template 编译 成 一 段 document fragment, 拿 到 
el 对 象 。 而 指令 解析 部 分 就 是 通过 compile(el，options) 方 法 实现 的 。 接 下 来 我 们 看 一 下 compile 
方法 的 实现 ， 它 的 源码 定义 如 下 : 


<!-- 源 码 目 录 : src/compiler/compile.js--» 


export function compile (el, options, partial) { 
// link function for the node itself. 


var nodeLinkFn = partial || !options. asComponent 
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? compileNode (el, options) 
null 
// link function for the childNodes 
var childLinkFn = 
!(nodeLinkFn && nodeLinkFn.terminal) && 
lisScript(el) && 
el.hasChildNodes () 
? compileNodeList(el.childNodes, options) 
null 
/** 
* A composite linker function to be called on a already 
* compiled piece of DOM, which instantiates all directive 
* instances. 
* 
* (param (Vue) vm 
* (param (Element|DocumentFragment] el 
* (param {Vue} [host] - host vm of transcluded content 
* (param {Object} [scope] - v-for scope 
* param {Fragment} [frag] - link context fragment 
* @return {Function|undefined} 
*/ 
return function compositeLinkFn (vm, el, host, scope, frag) { 
// cache childNodes before linking parent, fix #657 
var childNodes = toArray(el.childNodes) 
// link 
var dirs = linkAndCapture(function compositeLinkCapturer () { 
if (nodeLinkFn) nodeLinkFn(vm, el, host, scope, frag) 
if (childLinkFn) childLinkFn(vm, childNodes, host, scope, frag) 
}, vm) 
return makeUnlinkFn(vm, dirs) 
} 
} 
compile 方法 主要 通过 compileNode(el, options) 方 法 完成 节点 的 解析 , 如 果 节 点 拥有 子 节点 ， 


则 调 


J] compileNodeList(el.childNodes, options) 方 法 完成 子 节点 的 解析 。compileNodeList 方法 其 


实 就 是 遍历 子 节 点 ， 递 归 调 ) 


| compileNode 77 7 


。 因 为 DOM 元 素 本 身 就 是 树 结 构 ， 这 种 递归 


方法 也 就 
看 一 下 c 
<!-- 源 码 目 录 : 


function compileNode 


ler/compile.js--» 


{ 


src/compil 


(node, options) 


i 是 常见 的 树 的 深度 遍历 方法 ， 这 样 就 可 以 完成 整个 DOM 树 节 点 的 解析 。 接 下 来 我 们 
ompileNode 方法 的 实现 ， 它 的 源码 定义 如 下 : 
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var type = node.nodeType 
if (type === 1 && !isScript (node)) { 


return compileElement (node, options) 


else if (type === 3 && node.data.trim()) { 


return compileTextNode (node, options) 


else { 


return null 


compileNode 方法 对 节点 的 nodeType 做 判断 ,如果 是 一 个 
则 调用 compileElement(node, options) 7; i: f£ Br; 如 果 是 一 


— 


compileTextNode(node，options) 方 法 解析 。 我 们 在 前 


IT 


{{times}}， 这 实际 上 是 v-text 指令 ， 它 的 解析 是 通过 compileTextNode 方法 实现 的 。 接 下 来 我 们 


看 一 下 compileTextNode 方法 ， 它 的 源码 定义 如 下 : 


<!-- 源 码 目录 : src/compiler/compile.js--> 


function compileTextNode (node, options) { 


// skip marked text nodes 
if (node. skip) { 
return removeText 
} 
var tokens = parseText (node.wholeText) 
if (!tokens) { 
return null 
} 


// mark adjacent text nodes as skipped, 


E script 普通 


的 例子 


// because we are using node.wholeText to compile 


// all adjacent text nodes together. This fixes 


// issues in IE where sometimes it splits up a single 


// text node into multiple ones. 
var next = node.nextSibling 
while (next && next.nodeType === 3) { 
next. skip = true 
next = next.nextSibling 
} 
var frag = document.createDocumentFragment () 


var el, token 


for (var i = 0, 1 = tokens.length; i < 1; i++) 


FP 解析 的 是 


个 非 空 的 文本 节点 ， 则 调用 


的 元 素 Cdiv, p 等 ); 


E 空 文本 节点 count: 


Mq 
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token = tokens[i] 


el = token.tag 
? processTextToken(token, options) 
: document.createTextNode (token.value) 
frag.appendChild(el) 
} 


return makeTextNodeLinkFn (tokens, frag, options) 


compileTextNode 方法 首先 调用 了 parseText 方法 对 node.wholeText 做 解析 。 主 要 通过 ] 


表达 式 解 析 count: {{times}} 部 分 ， 我 们 看 一 下 解析 结果 ， 如 图 20-3 所 示 。 
7122 
7123 var tokens = parseText(node.wholeText); | Y tokens: Array[2] 
7124 if (!tokens) 1 v 0: Object 
7125 return null; value: "count: " 
us b proto : Object 
7128 // mark adjacent text nodes as skipped, | Y 1: Object 
7129 // because we are using node.wholeText t html: false 
Aa .* |parseText ^v oneTime: false 

tag: true 


{} Line 7124, Column 5 


value: "times" 


图 20-3 ”parseText 解 析 文 本 节点 结 


FH 
AN 


E 则 


解析 后 的 tokens 是 一 个 数组 ， 数 组 的 每 个 元 素 则 是 一 个 Object。 如 果 是 count 这 样 的 普通 


文本 ， 则 返回 的 对 象 只 有 value 字段 ， 如 果 是 {{times}} 这 样 的 插值 ， 则 返 


onTime、tag、value 等 字段 。 


回 的 对 象 包含 html. 


接 下 来 创建 document fragment, 38/7] tokens 创建 DOM 节点 插入 到 这 个 fragment 中 。 在 遍 


， 如 果 token 无 tag 字段 ， 则 调 ) 


历 过 程 ! 


] document.createTextNode(token.value) 方 法 创建 DOM 


节点 ; 否则 调用 processTextToken(token, options) 方 法 创建 DOM 节点 和 扩展 token WHR. 我 们 看 


图 20-4 所 示 。 


一 下 调用 后 的 结果 ， 如 


7140|var el, token; el = text, token = Object Ttag: t| V 
7141|for (var i = 0, l = tokens.length; i < l; i++) { 
7142| token = tokens[il; token = Object {tag: true, 


7143 el = token.tag ? processTextToken(token, option: 
| 7144| frag.appendChild(el); 
7145 


7146 return makeTextNodeLinkFn(tokens, frag, options); 
7147 


| Aa .* | parseText av Rep BEND False 
{} Line 7144, Column 7 oneTime: false 


token: Object 
Y descriptor: Object 
= def: Object 
expression: "times" 
filters: undefined 
name: "text" 
b proto : Object 


可 以 看 到 ， token 字段 多 了 一 个 descriptor 属性 。 这 个 属 ' 


图 20-4 ”processTextToken 解 析 文 本 节点 结果 


性 包含 了 几 个 字段 ， 


N 


指令 相关 操作 的 对 象 ，expression 为 解析 后 的 表达 式 ，filters 为 过 滤器 ，name 为 指令 


def 


的 名 称 。 


Zh 
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在 compileTextNode 方法 的 最 后 ， 调 用 makeTextNodeLinkFn(tokens, frag, options) 并 返回 该 
方法 执行 的 结果 。 接 下 来 我 们 看 一 下 makeTextNodeLinkFn 方法 ， 它 的 源码 定义 如 下 : 


<!-- 源 码 目 录 : src/compiler/compile.js--» 


function makeTextNodeLinkFn (tokens, frag) { 
return function textNodeLinkFn (vm, el, host, scope) { 
var fragClone - frag.cloneNode (true) 
var childNodes = toArray(fragClone.childNodes) 
var token, value, node 
for (var i= 0, 1 = tokens.length; i < 1; i++) { 
token = tokens[i] 
value = token.value 
if (token.tag) { 
node = childNodes [i] 
if (token.oneTime) { 
value = (scope || vm) .Seval (value) 
if (token.html) { 
replace(node, parseTemplate(value, true)) 
j else 4 
node.data -  toString(value) 
} 
} else 4 


vm. bindDir(token.descriptor, node, host, scope) 


} 


replace(el, fragClone) 


makeTextNodeLinkFn 这 个 方法 什么 也 没 做 , 它 仅仅 是 返回 了 一 个 新 的 方法 textNodeLinkFn. 
Hr ti [6139], 这 个 方法 最 终 作为 compileNode 的 返回 值 , 被 添加 到 compile 方法 生成 的 childLinkFn 
中 。 


os 


我 们 回 到 compile 方法 ， 在 compile 方法 的 最 后 有 这 样 一 段 代 码 ， 


<!-- 源 码 目录 : src/compiler/compile.js--» 


return function compositeLinkFn (vm, el, host, scope, frag) { 
// cache childNodes before linking parent, fix #657 


var childNodes = toArray(el.childNodes) 
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// link 
var dirs = linkAndCapture(function compositeLinkCapturer () { 

if (nodeLinkFn) nodeLinkFn(vm, el, host, scope, frag) 

if (childLinkFn) childLinkFn(vm, childNodes, host, scope, frag) 
}, vm) 


return makeUnlinkFn(vm, dirs) 


compile 方法 返回 了 compositeLinkFn， 它 在 Vue.prototype. compile 方法 执行 时 ， 是 通过 
compile(el，options)(this，e]) 调 用 的 。compositeLinkFn 方法 执行 了 linkAndCapture 方法 ， 它 的 功 
能 是 通过 调用 compile 过 程 中 生成 的 link 方法 创建 指令 对 象 ， 再 对 指令 对 象 做 一 些 绑 定 操作 。 
linkAndCapture 方法 的 源码 定义 如 下 : 


<!-- 源 码 目录 : src/compiler/compile.js--» 


function linkAndCapture (linker, vm) { 

/* istanbul ignore if */ 

if (process.env.NODE ENV === 'production') { 
// reset directives before every capture in production 
// mode, so that when unlinking we don't need to splice 
// them out (which turns out to be a perf hit). 
// they are kept in development mode because they are 
// useful for Vue's own tests. 
vm. directives - [] 

} 

var originalDirCount = vm. directives.length 

linker () 

var dirs = vm. directives.slice(originalDirCount) 

dirs.sort (directiveComparator) 

for (var i= 0, 1 = dirs.length; i < l; i++) { 
dirs[i]. bind() 

} 


return dirs 


linkAndCapture 方法 首先 调用 了 linker 方法 , "C xh compile 过 程 中 生成 的 所 有 linkFn F 
调用 ， 本 例 中 会 调用 到 之 前 定义 的 textNodeLinkFn。 这 个 方法 会 遍历 tokens, 判断 如 果 token 的 
tag 属性 值 为 true H. oneTime 属性 值 为 false, 则 调用 vm. bindDir(token.descriptor node, host, scope) 
方法 创建 指令 对 象 。vm. bindDir 方法 的 源码 定义 如 下 : 


<!-- 源 码 目录 : src/instance/internal/lifecycle.js--» 
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Vue.prototype. bindDir = function (descriptor, node, host, scope, frag) { 
this. directives.push( 


new Directive(descriptor, this, node, host, scope, frag) 


Vue.prototype. bindDir 方法 就 是 根据 descriptor 实例 化 不 同 的 Directive 对 象 ， 并 添加 到 vm 
实例 的 directives 数组 中 的 。 到 这 一 步 , Vue.js 从 解析 模板 到 生成 Directive 对 象 的 步骤 就 完成 了 。 
接 下 来 回 到 linkAndCapture 方法 ， 它 对 创建 好 的 directives 进行 排序 ， 然 后 遍历 directives 调用 
dirs[i]. bind 方法 对 单个 directive 做 一 些 绑 定 操作 。dirs[i] bind 方法 的 源码 定义 如 下 : 


<!-- 源 码 目录 : src/directive.js--» 


Directive.prototype. bind = function () { 

var name - this.name 

var descriptor = this.descriptor 

// remove attribute 

ife 
(name !== 'cloak' || this.vm. isCompiled) && 
this.el && this.el.removeAttribute 

) { 
var attr = descriptor.attr || ('v-' + name) 
this.el.removeAttribute (attr) 

} 

// copy def properties 

var def = descriptor.def 

if (typeof def === 'function') { 
this.update = def 

} else { 
extend (this, def) 

} 

// setup directive params 

this. setupParams () 

// initial bind 

if (this.bind) ( 
this.bind() 

} 

this. bound = true 

if (this.literal) { 
this.update && this.update (descriptor.raw) 


} else if ( 
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(this.expression || this.modifiers) && 
(this.update || this.twoWay) && 
!this. checkStatement () 
{ 
// wrapped updater for context 
var dir = this 
if (this.update) { 
this. update = function (val, oldVal) { 
if (!dir. locked) ( 
dir.update(val, oldVal) 


} 
} else { 
this. update = noop 
} 
var preProcess = this. preProcess 
? bind(this. preProcess, this) 
Ponull 
var postProcess - this. postProcess 
? bind(this. postProcess, this) 
Sonücd 
var watcher - this. watcher - new Watcher( 
this.vm, 
this.expression, 
this. update, // callback 
{ 
filters: this.filters, 
twoWay: this.twoWay, 
deep: this.deep, 
preProcess: preProcess, 
postProcess: postProcess, 


Scope: this. scope 


) 
// v-model with inital inline value need to sync back to 


// model instead of update to DOM on init. They would 
// set the afterBind hook to indicate that. 
if (this.afterBind) { 
this.afterBind() 
) else if (this.update) { 
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this.update (watcher.value) 


Directive.prototype. bind 方法 的 主要 功能 就 是 做 一 些 指令 的 初始 化 操作 ， 如 混合 def 属性 。 
def 是 通过 this.descriptor.def 获得 的 ，this.descriptor 是 对 指令 进行 相关 描述 的 对 象 ， 而 
this.descriptor.def 则 是 包含 指令 相关 操作 的 对 象 。 比 如 对 于 v-text 指令 ， 我 们 可 以 看 一 下 它 的 相 
关 操 作 ， 源 人 码 定义 如 下 : 


<!-- 源 码 目录 : src/directives/public/text.js--> 


export default { 


bind () { 
this.attr = this.el.nodeType === 3 
?otdatat 


: 'textContent' 
hy 
update (value) { 


this.el[this.attr] =  toString (value) 


v-text 的 def 包含 了 bind 和 update 方法 , Directive 在 初始 化 时 通过 extend(this, def) 方 法 可 以 
对 实例 扩展 这 两 个 方法 。Directive 在 初始 化 时 还 定义 了 this. update 方法 ， 并 创建 了 Watcher, 
把 this. update 方法 作为 Watcher 的 回调 函数 。 这 里 把 Directive 和 Watcher 做 了 关联 , “4 Watcher 
观察 到 指令 表达 式 值 变化 时 ， 会 调用 Directive 实例 的 update 方法 ， 最 终 调用 v-text 的 update 
方法 更 新 DOM 节点 。 


至 此 ，vm 实例 中 编译 模板 、 解 析 指 令 、 绑 定 Watcher 的 过 程 就 结束 了 。 接 下 来 我 们 看 一 下 
Watcher 的 实现 ， 了 解 Directive 和 Observer 之 间 是 如 何 通过 Watcher 关联 的 。 


20.1.3 Watcher 


我 们 先 来 看 一 下 Watcher 类 的 实现 ， 它 的 源码 定义 如 下 : 


<1!-- 源 码 目录 : src/watcher.js--» 


export default function Watcher (vm, expOrFn, cb, options) { 
// mix in options 
if (options) { 


extend(this, options) 
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} 


var isFn 


typeof expOrFn --- 'function' 


this.vm vm 


m. watchers.push (this) 


his.expression = expOrFn 


his. 


his.i ++uid // uid for batching 


his.active true 
this.lazy // for lazy watchers 


[] 


his.dirty 


his.deps = 


[] 


new Set () 


his.newDeps 


his.depIds - 


Vi 
t 
t 
t 
t 
i 
t 
t 
t. 
t 


his.newDepIds new Set() 


this.prevError null // for async error stacks 


// parse expression for getter/setter 


if (isFn) { 
this.getter - expOrFn 
this.setter - undefined 
; else { 
var res = parseExpression(expOrFn, this.twoWay) 
this.getter - res.get 
this.setter = res.set 
} 
this.value = this.lazy 


? undefined 


this.get () 


// state for avoiding false triggers for deep and Array 


// watchers during vm. digest () 


this.queued this.shallow false 


Directive 实例 在 初始 化 Watcher 时 ， 会 传 入 指令 的 expression. Watcher 构造 函数 会 通过 


parseExpression(expOrFn，this.twoWay) 方 法 对 expression 做 进 一 


步 的 解析 。 在 前 面 的 例子 中 ， 


expression 是 times, passExpression 方法 的 功能 是 把 expression 转换 成 一 个 对 象 , 如 图 20-5 所 示 。 
3134 this.getter = expOrFn; exporFn = "time| w Watch ea e 
3135 this.setter - undefined; 


3136 


else { 
var res 


parseExpressio 


(expOrFn, this 


Y res: Object 
exp: "times" 


3138 this.getter - res.get; j 
3139 this.setter = res. set; > get: function anonymous (scope /**/) 
3140 } > proto : Object 
3141 this.value = this.lazv ? undefined : this 
图 20-$  passExpressiondA £T £i 
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可 以 看 到 res 有 两 个 属性 ， 其 中 exp 为 表达 式 字 符 串 ，get 是 通过 new Function 生成 的 匿名 
方法 ， 可 以 把 它 打印 出 来 ， 如 图 20-6 所 示 。 


> res.get.toString() 


"function anonymous(scope 
[*x*/) t 

return scope.times; 

}" 


图 20-6 ”res.get 方 法 打印 结果 


可 以 看 到 res.get 方法 很 简单 ， 它 接受 传 入 一 个 scope 变量 ， 返 回 scope.times。 对 于 传 入 的 
scope 值 ， 稍 后 我 们 会 进行 介绍 。 在 Watcher 构造 函数 的 最 后 调用 了 this.get 方法 ， 它 的 源码 定 
XP: 


<1!-- 源 码 目录 : src/watcher.js--» 


Watcher.prototype.get = function () { 
this.beforeGet () 
var scope = this.scope || this.vm 
var value 
try { 


value = this.getter.call(scope, scope) 


} catch (e) { 
rE 
process.env.NODE_ENV !== 'production' && 


config.warnExpressionErrors 
) ( 
warn ( 
‘Error when evaluating expression ' + 
rer + this expression + ' 2 T 4 e,toString(); 


this.vm 


} 
// “touch" every property so they are all tracked as 


// dependencies for deep watching 
if (this.deep) { 
traverse (value) 
} 
if (this.preProcess) { 


value = this.preProcess (value) 
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if (this.filters) { 
value - 

} 

if (this.postProcess) { 
value = this.postProcess (value) 

} 

this.afterGet () 


return value 


scope. applyFilters(value, null, 


this.filters, 


false) 


Watcher.prototype.get 方法 的 功能 就 是 对 当前 Watcher 进行 求 值 ， 收 集 依赖 关系 。 它 首先 执 


行 this.beforeGet JIE, RIG NUP: 


<1!-- 源 码 目录 ; 
Watcher.prototype.beforeGet = 


src/watcher.js--» 


Dep.target = this 


function 


Watcher. prototype.beforeGet 很 简单 ， 设 置 Dep.target 为 当前 Watcher 实例 ， 为 接 下 来 的 依赖 
收集 做 准备 。 我 们 回 到 get 方法 ， 接 下 来 执行 this.getter.call(scope, scope) 方 法 ， 这 里 的 scope 是 
this.vm, 也 就 是 当前 Vue 实例 。 这 个 方法 实际 上 相当 于 获取 vm.times, 这 样 就 触发 了 对 象 的 getter。 


添加 getter 和 setter。 回 顾 一 下 代码 : 


<!-- 源 码 目录 ; 
Object.defineProperty (obj, 


src/observer/index.js--» 


key, 4 
enumerable: true, 
configurable: true, 
get: function reactiveGetter () { 
var value - 
if (Dep.target) { 

dep.depend () 

if (childOb) { 

childOb.dep.depend() 

} 

if (isArray(value)) { 
x 


for (var e, i = 0， 


e = value[i] 


e && e. ob && e. ob 


getter ? getter.call (obj) 


value.length; 


: val 


E < Iz 


.dep.depend () 


i++) 


{ 


在 20.1.1 节 我 们 给 data 添加 Observer 时 ， 通 过 Object.defineProperty 给 data 对 象 的 每 一 个 属性 
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} 


return value 


), 


c 


当 获 取 vm.times IN, 会 执行 到 get 方法 体内 。 由 于 我 们 在 之 前 已 经 设置 了 Dep.target 为 当前 
Watcher 实例 ， 所 以 接 下 来 就 调用 dep.depend0 方 法 完成 依赖 收集 。 它 实际 上 是 执行 了 
Dep.target.addDep(this), 相当 于 执行 了 Watcher 实例 的 addDep 方法 , 把 Dep 实例 添加 到 Watcher 
实例 的 依赖 中 。addDep 方法 的 源码 定义 如 下 : 


<1!-- 源 码 目录 : src/watcher.js--» 
Watcher.prototype.addDep = function (dep) { 


var id = dep.id 
if (!this.newDepIds.has(id)) { 
this.newDepIds.add (id) 
this.newDeps.push (dep) 
if (!this.depIds.has(id)) { 
dep.addSub (this) 


Watcher.prototype.addDep 方法 就 是 把 dep 添加 到 Watcher 实例 的 依赖 中 ， 同 时 又 通过 
dep.addSub(this) 把 Watcher 实例 添加 到 dep 的 订阅 者 中 。addSub 方法 的 源码 定义 如 下 : 


<!-- 源 码 目录 : src/observer/dep.js--> 


Dep.prototype.addSub = function (sub) { 
this.subs.push (sub) 


Iun 


至 此 ， 指 令 完成 了 依赖 收集 ， 并 且 通 过 Watcher 完成 了 对 数据 变化 的 订阅 。 


接 下 来 我 们 看 一 下 ， 当 data 发 生变 化 时 ， 视 图 是 如 何 自动 更 新 的 。 在 前 面 的 例子 中 ， 我 们 
通过 setInterval 每 隔 1s 执行 一 次 vm.times++， 数 据 改变 会 触发 对 象 的 setter， 执 行 set 方法 体 的 
代码 。 回 顾 一 下 代码 : 


<!-- 源 码 目录 : src/observer/index.js--» 


Object.defineProperty(obj, key, { 


set: function reactiveSetter (newVal) { 


var value = getter ? getter.call(obj) : val 
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if (newVal === value) { 
return 
} 
if (setter) { 
setter.call (obj, newVal) 
perse d 
val = newVal 
} 
childOb = observe (newVal) 


dep.notify() 


这 里 会 调用 dep.notify0 方 法 ， 它 会 遍历 所 有 的 订阅 者 ， 也 就 是 Watcher 实例 。 然 后 调用 
Watcher 实例 的 update 方法 ， 源 码 定义 如 下 : 


<1!-- 源 码 目录 : src/watcher.js--» 


Watcher.prototype.update = function (shallow) { 
if (this.lazy) { 


this.dirty = true 


else if (this.sync || !config.async) { 


this.run() 


else { 
// if queued, only overwrite shallow with non-shallow, 
// but not the other way around. 
this.shallow = this.queued 
? shallow 
? this.shallow 
false 
!!shallow 
this.queued = true 
// record before-push error stack in debug mode 
/* istanbul ignore if */ 
if (process.env.NODE ENV !-- 'production' && config.debug) { 
this.prevError = new Error('[vue] async stack trace') 
} 
pushWatcher (this) 


Watcher.prototype.update 方法 在 满足 某 些 条 件 下 会 直接 调用 this.run 方法 。 在 多 数 情况 下 会 
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调用 pushWatcher(this) 方 法 把 Watcher 实例 推 入 队列 中 ， 延 迟 this.run 调用 的 时 机 。pushWatcher 


方法 的 源码 定义 如 下 : 
<!-- 源 码 目录 : 


export function pushWatcher 


src/batcher.js--> 


(watcher) { 
const id = watcher.id 
if (has[id] == null) { 
// push watcher into appropriate queue 
const q = watcher.user 

?. userQueue 

: queue 
has[id] = q.length 
q.push (watcher) 
// queue the flush 
if (!waiting) { 

waiting - true 


nextTick(flushBatcherQueue) 


0 


HEAD SI 


pushWatcher 方法 把 Watcher 


Watcher 队列 ， 这 是 Vuejjs 的 一 种 性 能 优化 手段 。 


执行 3 次 vm.time++， 


， 通 过 nextTick 方法 在 下 一 个 事件 循环 周期 处 理 


因为 如 果 同 时 观察 的 数据 多 次 变化 ， 比 如 同步 


司 步调 用 watcherrun 就 会 


TH. 


触发 3 次 DOM 操作 。 而 推 入 队列 中 等 待 下 一 


个 事件 循环 周期 再 操作 队列 里 的 Watcher， 因 为 是 同一 个 Watcher, 它 只 会 调用 一 次 watcherrun， 
从 而 只 触发 一 次 DOM 操作 。 接 下 来 我 们 看 一 下 flushBatcherQueue 方法 ， 它 的 源码 定义 如 下 : 


<!-- 源 码 目 录 : 


function flushBatcherQueue () { 


src/batcher.js--» 


runBatcherQueue (queue) 
runBatcherQueue (userQueue) 
// user watchers triggered more watchers, 
// keep flushing until it depletes 
if (queue.length) { 
return flushBatcherQueue () 
} 
// dev tool hook 
/* istanbul ignore if */ 
if (devtools && config.devtools) { 


devtools.emit('flush') 
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} 
resetBatcherState() 


flushBatcherQueue 方法 通过 调用 runBatcherQueue 来 run Watcher。 这 里 我 们 看 到 Watcher 
队列 分 为 内 部 queue 和 userQueue， 其 中 userQueue 是 通过 $watch() 方 法 注册 的 Watcher。 我 们 优 
先 run 内 部 queue 来 保证 指令 和 DOM 节点 优先 更 新 , 这 样 当 用 户 自 定 义 的 Watcher 的 回调 函数 
触发 时 DOM 已 更 新 完毕 。 接 下 来 我 们 看 一 下 runBatcherQueue 方法 ， 它 的 源码 定义 如 下 : 


<1!-- 源 码 目录 : src/batcher.js--» 


function runBatcherQueue (queue) { 
// do not cache length because more watchers might be pushed 
// as we run existing watchers 
for (let i = 0; i < queue.length; i++) { 
var watcher = queue[i] 
var id = watcher.id 
has[id] = null 
watcher.run() 
// in dev build, check and stop circular updates. 
if (process.env.NODE ENV !-- 'production' && has[id] != null) { 
circular[id] = (circular[id] || 0) + 1 
if (circular[id] > config. maxUpdateCount) { 
warn( 
'You may have an infinite update loop for watcher ' 十 


'with expression "' + watcher.expression + '"', 


watcher.vm 


break 


queue.length = 0 


runBatcherQueued 的 功能 就 是 遍历 queue 中 Watcher 的 run 方法 。 接 下 来 我 们 看 一 下 Watcher 
的 run 方法 ， 它 的 源码 定义 如 下 ; 


<1!-- 源 码 目录 : src/watcher.js--» 


Watcher.prototype.run = function () { 
if (this.active) { 


var value = this.get() 
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} 


value !== this.value || 
// Deep watchers and watchers on Object/Arrays should fire even 
// when the value is the same, because the value may 
// have mutated; but only do so if this is a 
// non-shallow update (caused by a vm digest). 
((isObject(value) || this.deep) && !this.shallow) 
{ 
// set new value 
var oldValue = this.value 
this.value - value 
// in debug + async mode, when a watcher callbacks 
// throws, we also throw the saved before-push error 
// so the full cross-tick stack trace is available. 
var prevError - this.prevError 
/* istanbul ignore if */ 
if (process.env.NODE ENV !-- 'production' && 
config.debug && prevError) ( 
this.prevError - null 
try { 
this.cb.call(this.vm, value, oldValue) 
} catch (e) { 
nextTick(function () { 


throw prevError 


} else { 


this.cb.call(this.vm, value, oldValue) 


this.queued = this.shallow = false 


Watcher.prototype.run 方法 再 次 对 Watcher 求 值 ， 重 新 收 


EV 


Hj va 


更 新 


} 


lue 的 关系 。 如 果 不 变 则 什么 也 不 做 ， 如 果 变 了 则 调用 this.cb.call(this.vm, value, o 


集 依 赖 。 接 下 来 判断 求 值 结 果 和 之 


ldValue) 


DOM。 这 样 就 完成 了 数据 更 新 到 对 应 视图 的 变化 过 程 。 


方法 。 这 个 方法 是 Directive 实例 创建 Watcher 时 传 入 的 ， 它 对 应 相关 指令 的 update 方法 来 真实 
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Watcher 巧妙 地 把 Observer 和 Directive 关联 起 来 ， 实 现 了 数据 一 旦 更 新 ， 视 图 就 会 自动 变 
化 的 效果 。 尽 管 Vue.js 利用 Object.defineProperty 这 个 核心 技术 实现 了 数据 和 视图 的 绑 定 ， 但 仍 
然 会 存在 一 些 数据 变化 检测 不 到 的 问题 ， 接 下 来 我 们 看 一 下 这 部 分 内 容 。 


20.2 ”变化 检测 问题 


受 ES 5 的 限制 ，Vuejs 不 能 检测 到 对 象 属性 的 添加 和 删除 。 因 为 Vue.js 在 初始 化 实例 时 将 


属性 转换 为 getter/setter， 所 以 属性 必须 在 data 对 象 
响应 式 的 。 代 码 示 例如 下 : 


<div id="main"> 
«hl»((a)) {{b}}</h1> 
</div> 
<script src="vue.js"></script> 
«script» 
var vm = new Vue({ 
el: '#main', 
datar [ar b} 
)); 
// vm. a 现在 是 响应 式 的 


vm.b = 2; 
// wm.b 不 是 响应 式 的 


</script> 


上 已 存在 才能 让 Vue.js 转换 它 ， 才 能 让 它 是 


我 们 发 现 , 通过 vm.b=2 给 data 对 象 添加 属性 并 不 会 触发 视图 的 变化 。 不过， 有 办 法 在 Vue 


实例 创建 完成 之 后 添加 属性 并 且 让 它 是 响应 式 的 。 对 于 Vue 实例 ， 可 以 使 ) 


方法 。 代 码 示例 如 下 : 


vm.$set('b', 2); 
// wm.b 是 响应 式 的 


J$set(key, value) 实 例 


为 何 通过 Vue 实例 的 $set 方法 就 能 让 vm.b 变 成 啊 应 式 的 ? 我 们 来 一 探究 竟 。$set 方法 的 源 


码 定 义 如 下 : 


<!-- 源 码 目录 : src/instance/api/data.js--> 


Vue.prototype.$set = function (exp, val) { 
var res = parseExpression(exp, true) 


if (res && res.set) { 
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res.set.call(this, this, val) 


Vue.prototype.$set 方法 首先 通过 parseExpression 方法 对 exp 表达 式 做 解析 ， 解 析 的 结果 包 


] compileSetter(exp) 方 法 生成 的 。compileSetter 


它 是 通过 调 ) 


& set 属性 。set 属性 是 一 个 方法 ， 
的 源码 定义 如 下 : 
<!-- 源 码 目录 : src/parsers/expression.js--» 


function compileSetter (exp) { 


var path = parsePath(exp) 


if (path) { 


return function 


(scope, val) { 


setPath(scope, path, val) 
} 
} else i 
process.env.NODE ENV !== 'production' && warn ( 


'Invalid setter expression: 


compileSetter 方法 返回 
里 的 setPath(scope, path, val) 方 法 


o 


' + exp 


了 一 个 fpnction， 前 面 执行 res.set.call(this，this，valD 就 相当 于 执行 这 


Hu 


MN 


scope 为 vm 实例 ; path 为 exp 解析 后 的 路 径 数 组 ， 本 例 


4 


PAb] val 为 设置 的 值 ， 本 例 ， 
<!1-- 源 码 目录 : src/parsers/path.j 
export function setPath (obj, 

var original = obj 

if (typeof path === 'string') 

path = parse (path) 
} 
if (!path || !isObject (obj) ) 


return false 


} 


var last, key 


for (var i 03; aL 


last obj 
path[i] 


(key.charAt(0) 


key 
if 


1x1) 


key 


为 2。 接 下 来 我 们 看 一 下 setPath 方法 ， 它 的 源码 定义 如 下 : 


s--> 


path.length; 


parseExpression(key.slice(1)).get.call(original, 


path, val) { 


{ 


{ 


iX Dp ae) d 


{ 


original) 
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if (aS she ly 


obj = obj[key] 


if (!isObject (obj) ) 


B 


{ 


obj 
if 
warnNonExistent (path, 
} 
set (last, 
} 


} else { 


key, obj) 


if { 


obj .$set (key, val) 


(isArray (obj) ) 


else if { 


(key in obj) 


obj [key] val 


else { 
if 

warnNonExistent (path, 
} 


set(obj, key, val) 


} 


return true 


(process.env.NODE ENV !== 'production' 


(process.env.NODE ENV !== 'production' 


&& last. isVue) { 


last) 


&& obj. isVue) { 


obj) 


setPath 方法 就 是 遍历 path | 


方法 让 obj.key 也 是 响应 式 的 。 接 下 来 我 们 看 一 下 set TE, ' 


上 的 路 径 ， 对 path 路 径 上 的 对 象 求 值 ， 并 调用 


, val) { 


<1!-- 源 码 目录 : src/util/lang.js--» 
export function set (obj, key 
if (hasOwn (obj, key)) { 
obj[key] = val 
return 
} 
if (obj. isVue) { 
set(obj. data, key, val) 
return 
} 
var ob = obj. ob _ 
if (!ob) { 


4 set(obj, key, val) 


CAIUS xe SOUP 
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obj[key] = val 
return 
} 
ob.convert (key, val) 
ob.dep.notify() 
if (ob.vms) { 
var i = ob.vms.length 
while (i--) { 
var vm = ob.vms[i] 
vm. proxy (key) 
vm. digest() 
} 
} 


return val 


本 例 中 ， 我 们 调用 set 方法 传 入 的 obj 是 Vue 实例 ，key Hb, val 是 2， 因 此 obj. isVue 为 
true， 调 用 set(obj. data, key, val). 7E Vue 实例 化 时 ， 我 们 创建 了 Observer 实例 ， 并 通过 ob - 
属性 绑 定 在 data 上 ， 因 此 可 以 拿 到 这 个 ob 对 象 ， 并 调用 ob.convert(key，val) 方 法 把 key 绑 定 在 
data 上 ， 同 时 赋予 getter/setter 方法 。 然 后 调用 ob.dep.notify() 通 知 订阅 Watcher 的 更 新 ， 并 最 终 
更 新 视图 。 接 下 来 判断 ob 上 是 否 有 vue 实例 ， 如 果 有 则 遍历 ob 上 的 所 有 Vue 实例 ， 调 用 
vm. proxy(key) 方 法 把 key 代理 到 vm 上 ,在 本 例 中 就 是 可 以 通过 vm.b 访问 到 vm. datab。 最 后 
调用 vm. digest(0) 方 法 ， 强 制 vm 上 所 有 的 Watcher 重新 计算 。 


经 过 这 一 系列 的 操作 ， 就 相当 于 给 Vue 实例 的 data 对 象 新 增 了 属性 并 让 它 也 是 响应 式 的 。 
但 在 实际 运用 中 ， 我 们 并 不 总 是 需要 通过 $set 方法 新 增 属性 ， 特 别 是 在 初始 化 数据 时 ， 接 下 来 
让 我 们 看 一 下 这 部 分 内 容 。 


20.3 ”初始 化 数据 


尽管 Vue.js 提供 了 API 动态 地 添加 响应 属性 , 但 还 是 推荐 Vue 实例 初始 化 时 在 data 对 象 上 
声明 所 有 的 响应 属性 。 


我 们 不 建议 这 么 做 : 
var vm = new Vue({ 
template: '<div>{{msg}}</div>' 


)); 
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// 然后 添加 “msg 
vm.S$set('msg', DDFE!'); 


而 是 建议 这 么 做 : 


var vm = new Vue({ 
data: { 
// 以 一 个 空 值 声 明 ^msg^ 
msg: '' 
}, 
template: '<div>{{msg}}</div>' 
} 
// 然后 设置 `msg` 


vm.msg = 'DDEF!' 


之 所 以 这 么 建议 有 两 个 原因 : 


O data 对 象 就 像 组 件 状 态 的 模式 〈schema)， 在 它 上 面 声 明 所 有 的 属性 让 开发 者 了 解 组 件 
所 期 待 的 数据 源 的 样子 ， 这 样 的 代码 更 易于 理解 。 


T 
= 


O 添加 一 个 顶级 响应 属性 会 调用 vm._digest(0 方 法 强制 所 有 的 Watcher 重新 计算 ， 因 为 它 
之 前 不 存在 ,没有 Watcher 追 踪 它 .这么 做 性 能 通常 是 可 以 接受 的 (特别 是 对 比 AngularJS 
的 脏 检查 )， 但 是 可 以 在 初始 化 时 避免 。 


20.4 ”异步 更 新 队列 


Vue.js 默认 异步 更 新 DOM。 正 如 我 们 前 面 介绍 Watcher 的 实现 那样 ， 每 当 观 察 到 数据 变化 
I, Vue 就 开始 一 个 队列 ， 将 同一 事件 循环 内 所 有 的 数据 变化 缓存 起 来 。 这 样 做 的 好 处 是 ， 如 
果 一 个 Watcher 被 多 次 触发 ， 不 会 多 次 更 新 DOM， 只 会 推 入 一 次 到 队列 中 ， 这 样 等 到 下 一 次 事 


件 循环 时 ，Vue 只 进行 一 次 DOM 更 新 ， 并 清空 队列 。 


内 部 异步 队列 的 实现 使 用 了 nextTick 方法 ， 我 们 来 了 解 一 下 它 的 实现 原理 。NextTick 方法 
的 源码 定义 如 下 : 


<1!-- 源 码 目录 : src/util/env.js--» 


export const nextTick = (function () { 
var callbacks = [] 
var pending - false 
var timerFunc 


function nextTickHandler () { 
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pending = false 

var copies = callbacks.slice(0) 

callbacks - [] 

for (var i = 0; i < copies.length; i++) { 


copies [i] () 


/* istanbul ignore if */ 


if (typeof MutationObserver !== 'undefined' && !hasMutationObserverBug) 


} 


var counter = 1 
var observer - new MutationObserver (nextTickHandler) 
var textNode - document.createTextNode (counter) 
observer.observe(textNode, { 

characterData: true 
} 
timerFunc = function () { 

counter = (counter + 1) % 2 

textNode.data = counter 
} 
else f 
// webpack attempts to inject a shim for setImmediate 
// if it is used as a global, so we have to work around that to 
// avoid bundling unnecessary code. 
const context = inBrowser 

? window 

: typeof global !-- 'undefined' ? global : () 


timerFunc = context.setImmediate || setTimeout 


return function (cb, ctx) { 


var func = ctx 
? function () { cb.call(ctx) } 
toe 

callbacks.push(func) 

if (pending) return 

pending = true 


timerFunc(nextTickHandler, 0) 


HO 


{ 
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nextTick 方法 通过 立即 执行 的 匿名 函数 定义 ， 在 闭 包 环境 下 定义 了 nextTickHandler 方法 ， 
作为 最 终 执行 回调 函数 的 方法 。nextTick 方法 文 持 传 入 cb 和 ctx 两 个 参数 ， 其 中 cb 代表 异步 执 
行 的 回调 函数 ;， ctx 代表 回调 函数 执行 的 上 下 文 环境 。 函 数 调用 时 ， 先 用 callbacks 保存 传 入 的 
回调 函数 ， 接 着 调用 timeFunc 异步 执行 nextTickHandler 方法 。 


在 这 里 timeFunc 是 根据 当前 浏览 器 的 环境 定义 的 ， 如 果 当 前 浏览 器 的 环境 文 持 
MnutationObserver， 则 新 建 一 个 MutationObserver 实例 ， 传 入 nextTickHandler 的 回调 函数 ， 同 时 
创建 一 个 TextNode DOM 对 象 ， 对 它 进行 观察 。MutationObserver 是 监听 DOM 变动 的 接口 ， 当 
DOM 对 象 树 发 生 任何 变动 时 ，MutationObserver 就 会 得 到 通知 。 当 我 们 观察 TextNode 变化 时 ， 
就 会 触发 MutationObserver 在 实例 化 时 传 入 的 回调 函数 。 因 此 , 我 们 定义 的 timerFune 功能 就 是 
改变 这 个 TextNode 的 DOM, “4 timeFunc 调用 时 就 改变 TextNode 的 值 ， 从 而 触发 了 
nextTickHandler 的 调用 。 如 果 当 前 浏览 器 不 文 持 MutationObserver, timerFunc 的 定义 就 变 成 了 
setImmediate 或 者 setTimeout， 通 过 这 种 方式 达到 异步 执行 nextTickHandler 的 目的 。 


在 实际 应 用 中 ， 当 我 们 通过 数据 驱动 方式 更 新 了 某 个 DOM， 又 想 在 DOM 状态 更 新 后 做 一 
些 事 情 时 ， 由 于 DOM 异步 更 新 的 特性 ， 不 能 在 当前 事件 循环 中 直接 操作 这 个 DOM， 但 可 以 通 
过 Vue 实例 上 的 $nextTick 方法 来 实现 。 代 码 示例 如 下 : 


luni 


n 


Vue.component('example', { 
template: '<span>{{msg}}</span>', 
data: function () { 

return { 
msg: 'DDFE' 
} 
), 
methods: { 
updateMessage: function () { 
this.msg - 'Hello DDFE' 
console.log(this.$el.textContent) // => 'DDFE' 
this.$nextTick(function () { 


console.log(this.$el.textContent) // => 'Hello DDFE' 


Vue 实例 上 的 $nextTick 方法 实际 上 就 是 调用 了 我 们 前 面 定 义 的 nextTick 方法 ， 在 这 个 方法 
回调 函数 中 ， 我 们 可 以 放心 地 操作 更 新 后 的 DOM 对 象 。 


u 


398 Vue.js 权威 指南 


20.5 “计算 属性 的 奥秘 


Æ Vue.js F, 计算 属性 并 不 是 简单 的 getter， 它 会 持续 追踪 它 的 响应 依赖 。 在 计算 一 个 计算 


属性 时 ，Vuejs 更 新 它 的 依赖 列表 并 缓存 结果 ， 只 有 


Lik 


kt 中 一 个 依赖 发 生 了 变化 时 ， 绥 存 的 结 


果 才 无 效 。 因 此 ， 只 要 依赖 不 发 生变 化 ， 访 问 计 算 属性 就 会 直接 返回 缓存 的 结果 ， 而 不 是 调用 


getter. 


ATA BAF? 考虑 这 种 场景 : 我 们 有 一 个 高 耗 计算 属性 A， 它 要 遍历 一 个 巨型 数组 并 做 
大 量 的 计算 。 然 后 ， 可 能 有 甚 他 的 计算 属性 依赖 A。 如 果 没 有 缓存 ， 我 们 将 调用 A 的 getter YT 


多 次 ， 超 过 必要 的 次 数 。 


由 于 计算 属性 被 缓存 了 ， 在 访问 它 的 时 候 getter 不 总 是 被 调用 。 代 码 示例 如 下 : 


var vm = new Vue({ 


el: '#main', 
datas { 
msg: 'hello' 
), 
computed: { 
example: function () { 
return Date.now() + this.msg 
} 
), 
created: function () { 
var me - this; 
setInterval(function () { 
console.log (me.example); 
), 1000); 


计算 属性 example 只 有 一 个 依赖 : vm.msg。Datenow0 不 是 响应 依赖 ， 因 为 它 和 Vue 的 数 


所 示 。 


© 1466751984868hello 


图 20-7 vm.example 计 算 结 果 (1) 


据 观 察 系统 无 关 。 因 此 我 们 通过 setInterval 每 隔 1s 访问 一 次 vm.example, 得 到 的 结果 如 图 20-7 
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我 们 发 现 ， 每 次 访问 vm.example 的 结果 都 不 会 改变 ， 除 非 vm.msg 改变 。 我 们 对 代码 稍微 
做 一 下 改动 : 


created: function () { 
var me = this; 


setInterval(function () { 
me.msg = 'hello' + Math.random(); 


console.log (me.example); 


), 1000); 


我 们 在 计时 器 中 修改 了 vm.msg, 这 样 每 次 访问 vm.example 的 值 都 会 改变 , 如 图 20-8 所 示 。 


1466754079162hello0.9337198741002137 
1466754080160hello0.843598131798853 
1466754081162hello0.9033000266602766 
1466754082161hello0.0988812446371039 
1466754083161hello0.018732661367093284 


图 20-8 ”vm.example 计 算 结 果 (2) 


有 时 候 我 们 希望 每 次 访问 vm.example 时 都 调用 getter， 且 不 用 修改 它 的 响应 依赖 ， 这 时 可 
以 为 指定 的 计算 属性 关闭 缓存 。 代 码 示 例如 下 ; 


computed: { 


example: { 
cache: false, 
get: function () { 


return Date.now() + this.msg 


), 
created: function () { 
var me - this; 
setInterval (function () { 
console.log(me.example) ; 


}, 1000) 


我 们 对 指定 的 计算 属性 的 cahce 设置 为 false， 这 样 就 不 会 缓存 之 前 的 计算 结果 了 ， 每 次 都 
可 以 调用 vm.example 的 getter 方法 ， 如 图 20-9 所 示 。 
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1466767506989hello 
1466767507989hello 
1466767508990hello 
1466767509989hello 
1466767510987hello 
1466767511988hello 


现在 访问 vm.example， 每 次 返回 


的 时 间 惟 都 是 新 的 。 但 是 需要 注意 


120-9 vm.exampleit #4 (3) 


意 一 点 ， 上 只 是 在 JavaScript 


中 访问 是 这 样 的 ， 数 据 仍 然 是 依赖 驱动 的 。 如 果 在 模板 中 绑 定 了 {{fexample}y}， 只 有 响应 依赖 


vm.msg 变化 才 会 更 新 DOM. 


接 下 来 让 我 们 一 起 从 源码 层面 来 探秘 计算 
期 ， 其 中 有 一 个 过 程 就 是 调 ) 
码 定 义 如 下 : 


<!-- 源 码 目录 ; 
Vue.prototype. initComputed 


function 


() 


this.Soptions.computed 


var computed 


if (computed) { 


for (var key in computed) { 


var userDef computed[key] 


属性 的 实现 。Vue 实例 在 创建 过 程 中 会 有 生命 周 


J vm. initComputed 处 理 computed 属性 。_initComputed 方法 的 源 


src/instance/internal/state.js--> 


{ 


this) 


var def = { 
enumerable: true, 
configurable: true 

} 

if (typeof userDef === 'function') { 
def.get = makeComputedGetter (userDef, 
def.set = noop 

} else { 
def.get = userDef.get 


? userDef.cache !== false 


? makeComputedGetter (userDef.get, this) 


: bind(userDef.get, this) 
: noop 


def.set userDef.set 
? bind(userDef.set, this) 


: noop 
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Object.defineProperty(this, key, def) 


Vue.prototype. initComputed 方法 对 computed EIERE, E SURE VETE PERN XE Mo 


计算 属性 的 定义 可 以 是 一 个 function， 也 可 以 是 一 个 object。 默 认 计算 属性 是 一 个 function, R 
有 get 方法 ， 如 果 想 设置 计算 属性 的 set 方法 或 者 设置 cache 为 false， 则 应 把 计算 属性 定义 成 一 
性 的 get 方法 默认 是 通过 makeComputedGetter 方法 实现 的 ， 除 非 设 置 cache 


ni 


个 object. ilf 


xal 


为 false。 最 后 通过 Object.defineProperty(this, key, def) 方 法 把 每 个 计算 属性 绑 定 到 vm 实例 上 ， 


访问 vm 上 的 计算 属性 就 会 调用 def.get 方法 。 接 下 来 我 们 看 一 下 makeComputedGetter 方法 的 实 


现 ， 源 码 定义 如 下 : 


<!-- 源 码 目录 : src/instance/internal/state.js--» 


function makeComputedGetter (getter, owner) { 
var watcher = new Watcher (owner, getter, null, { 
lazy: true 
} 
return function computedGetter () { 
if (watcher.dirty) { 
watcher.evaluate () 
} 
if (Dep.target) { 
watcher. depend () 
} 


return watcher.value 


makeComputedGetter 方法 支持 getter 和 owner 两 个 参数 。 其 中 getter 为 用 户 定义 


性 的 get 方法 ; owner 为 当前 Vue 实例 。 首 先 创建 一 个 Watcher 实例 ， 传 入 的 option 设置 lazy 


computedGetter 方法 ， 访 问 vm 上 的 计算 属性 就 会 调用 该 方法 。 当 watcher.dirty 为 true 
用 watcherevaluate 方法 对 Watcher 进行 计算 。 接 下 来 我 们 看 一 下 watcherevaluate 方法 
源码 定义 如 下 : 


<!-- 源 码 目录 : src/watcher.js--» 


Watcher.prototype.evaluate = function () { 


// avoid overwriting another watcher that is being 


属性 值 为 tue， 这 个 设置 表明 Watcher 的 求 值 被 延迟 了 ， 并 不 会 在 创建 时 进行 求 值 。 接 着 返回 


时 ， 会 调 
的 实现 ， 


402 = Vuejs 权威 指南 


// collected. 

var current - Dep.target 
this.value = this.get() 
this.dirty = false 


Dep.target = current 


Watcher. prototype.evaluate 方法 通过 this.get 方法 对 Watcher 进行 求 值 ， 同 时 收集 依赖 。 接 着 
把 this.dirty 设置 为 flse， 这 样 当 再 次 访问 vm 上 的 计算 属性 时 ，watcher.dirty 为 false， 就 不 会 
再 次 对 Watcher 求 值 了 ， 因 此 也 不 会 再 次 访问 计算 属性 的 getter 方法 了 。 


那么 为 何 当 我 们 修改 计算 属性 的 响应 依赖 时 , getter 方法 会 再 次 被 调用 呢 ? 因为 在 我 们 第 一 
次 调用 计算 属性 的 getter 方法 时 ， 会 访问 响应 依赖 ， 也 就 触发 了 啊 应 依赖 的 getter 方法 ， 把 响应 
依赖 添加 到 当前 Watcher 中 ， 也 把 当前 Watcher 订阅 到 依赖 的 变化 中 。 所 以 当 响 应 依赖 被 修改 
时 ， 就 触发 了 响应 依赖 的 setter 方法 ， 会 调用 Watcher 的 update 方法 。 由 于 我 们 创建 的 是 一 个 
lazy Watcher， 所 以 会 把 Watcher 的 dirty 属性 值 设 置 成 ttue。 这 样 当 我 们 再 次 访问 计算 属性 时 ， 
会 重新 调用 watcher.evaluate 方法 对 Watcher 求 值 ， 因 此 计算 属性 的 getter 方法 被 再 次 调用 了 。 


20.6 “总结 


本 章 主 要 通过 源码 分 析 的 方式 带 大 家 认识 了 Vuejs 的 响应 式 原理 ， 了 解 到 模型 和 视图 是 如 
何 建立 关联 关系 的 、 对 一 些 ES 5 检测 不 到 的 数据 变化 如 何 处 理 、 如 何 初始 化 数据 、Watcher 队 
列 如 何 异 步 更 新 、 计 算 属 性 如 何 实 现 等 知识 。 


通过 对 Vue.js 的 一 些 内 部 实现 细节 的 学 习 ， 有 助 于 我 们 加 深 对 Vue.js 的 理解 ， 也 会 对 我 们 
使 用 Vue 开发 组 件 和 项 目 有 一 定 的 指导 意义 ， 可 以 避免 出 现 一 些 常见 问题 


s21 x 
源码 篇 一 一 父子 类 合并 策略 


相信 在 前 面 的 组 件 篇 中 已 经 有 同学 看 到 了 组 件 的 mixin 特性 ， 里 面 也 提 到 了 两 种 合并 
策略 。 


当 混 合 对 象 中 出 现下 面 两 种 情况 时 ， 


O 混合 对 象 和 组 件 存 在 同名 的 生命 周期 方法 时 , 它们 都 会 合并 到 一 个 数组 中 , 混合 对 象 的 
生命 周期 方法 优先 执行 ， 组 件 的 同名 生命 周期 方法 后 执行 。 


O 混合 对 象 的 其 他 选项 如 methods 中 定义 了 和 组 件 同 名 的 方法 时 , 组 件 会 覆盖 混合 对 象 的 
同名 方法 。 


21.1 策略 是 什么 


策略 其 实 是 一 个 对 象 ， 在 全 局 配置 config 中 也 暴露 了 一 个 对 象 ， 开 发 者 可 以 自 定 义 : 


<!-- 源 码 目录 : src/util/options.js --» 


var strats = config.optionMergeStrategies = Object.create (null) 


21.1.1 生命 周期 合并 策略 


ku 


当 父 子 类 同时 存在 同名 的 生命 周期 方法 时 ，Vue.js 内 部 是 如 何 处 理 的 呢 ? 生命 周期 合并 策 
略 如 图 21-1 所 示 。 
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[childVal] 


parentVal isArray(childVal) 


parentVal.concat(childVal) childVal 


源码 定义 如 下 : 


<!-- 源 码 目录 : src/util/options.js --> 


strats.init = 
strats.created = 


strats.ready = 


strats.attached = 


strats.detached 


strats.beforeCompile 
strats.compiled = 
strats.beforeDestroy = 
strats.destroyed = function (parentVal, childVal) { 
return childVal 
? parentVal 
? parentVal.concat (childVal) 
isArray (childVal) 
? childVal 
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: [childVal] 


: parentVal 


21.1.2. ”属性 方法 计算 


相 比 前 面 的 生命 周期 方法 ， 我 们 来 看 看 props、methods 以 及 computed 的 合并 策略 ， 如 
图 21-2 所 示 。 


extend(ret, childVal) 


图 21-2 属性 方法 计算 的 合并 策 
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源码 定义 如 下 : 


<1!-- 源 码 目 录 : src/util/options.js --» 


strats.props = 
strats.methods = 
strats.computed = function (parentVal, childVal) { 
if (!childVal) return parentVal 
if (!parentVal) return childVal 
var ret - Object.create (null) 
extend(ret, parentVal) 
extend(ret, childVal) 


return ret 


21.1.3 ”数据 合并 策略 


相 比 前 面 两 种 模式 , 这 种 模式 将 MVC 的 Controller 41 MVP 的 Presenter 改 成 了 ViewModel。 
View 的 变化 会 自动 更 新 到 ViewModel， 同 时 ViewModel 的 变化 也 会 自动 同步 到 View 上 显示 。 


这 种 自动 同步 是 因为 ViewModel 中 的 属性 实现 了 Observer， 当 属性 变更 时 都 能 触发 对 应 的 
操作 ， 如 图 21-3 所 示 。 


Ti 


源码 定义 如 下 : 


<!-- 源 码 目 录 : src/util/options.js --» 


strats.data = function (parentVal, childVal, vm) { 
if (!vm) ( 
// in a Vue.extend merge, both should be functions 
if (!childval) { 
return parentVal 
} 
if (typeof childVal !== 'function') { 
process.env.NODE ENV !== 'production' && warn ( 
'The "data" option should be a function ' + 
"that returns a per-instance value in component ' + 


'definitions.' 
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return parentVal 
} 
if (!parentVal) { 

return childVal 
} 
// when parentVal & childVal are both present, 
// we need to return a function that returns the 
// merged result of both functions... no need to 
// check if parentVal is a function here because 
// it has to be a function to pass previous merges. 
return function mergedDataFn () { 

return mergeData ( 

childVal.call(this), 


parentVal.call(this) 


} 
} else if (parentVal || childVal) { 
return function mergedInstanceDataFn () ( 
// instance merge 
var instanceData = typeof childVal === 'function' 
? childVal.call (vm) 
childVal 
var defaultData = typeof parentVal --- 'function' 
? parentVal.call (vm) 
undefined 
if (instanceData) { 
return mergeData(instanceData, defaultData) 
} else 1i 


return defaultData 
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parentVal || child Val 


ypeof child Val === function 


peof parentVal === function 


C» 


图 21-3 ”数据 的 合并 策略 


第 22 x 
nies E 


其 实 很 多 同学 都 看 过 Vue.js 的 源码 ， 或 者 已 经 在 前 面 的 一 些 源 码 示 例 章 节 中 看 到 了 Cache, 
本 节 我 们 就 来 讲述 它 。 


比如 在 模板 解析 的 源码 中 : — 


<!-- 源 码 目录 : src/parsers/template.js --> 
const templateCache = new Cache (1000) 
// stringToFragment 方法 中 的 应 API BIOS 
var hit = templateCache.get (cacheKey) put ELA 
// stringToFragment 方法 中 的 应 
templateCache.put(cacheKey, frag) shift limit 
get head 
22.1 Cache 有 什么 用 " 
顾名思义 ， 缓 存 一 般 可 以 用 来 放置 一 些 数据 ， 同 时 提供 一 些 seymap 


API 来 操作 数据 ， 如 图 22-1 所 示 。 


图 22-1  CacheX] Z 


Vue 作者 在 Vue 源码 中 提 到 Cache 参考 了 rsms 的 js-lIru， 原 文 如 下 : 


A doubly linked list-based Least Recently Used (LRU) cache. 


Will keep most recently used items while discarding least recently used items when its 
limit is reached. 


This is a bare-bone version of Rasmus Andersson's js-lru 
一 个 基于 LRU 算法 的 Cache, Rasmus Andersson 写 的 js-lru 的 精简 版 本 实现 。js-lru 本 身 提 
供 了 更 多 的 API， 比 如 find. set. remove. removeAll 等 。 
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22.2 LRU 


LRU (Least Recently Used， 最 近 最 少 使 用 )， 有 计算 机 学 习 背 景 的 同学 可 能 相对 比 


类 似 操 作 系 统 里 面 的 内 存 管 理 ， 如 图 22-2 所 示 。 


图 22-2 js-lru 的 设计 图 


22.3 Cache 类 


Cache 类 包含 一 些 基本 属性 和 几 个 原型 链 方法 ， 接 受 一 个 参数 limit. 


<!-- 源 码 目录 : src/cache.js#14 --> 


export default function Cache (limit) { 


this.size = 0 

this.limit = limit 

this.head = this.tail = undefined 
this. keymap - Object.create (null) 


22.44 put 


put 接受 两 个 参数 : 一 个 key 和 一 个 value， 返 回 被 删除 的 。 


<!-- 源 码 目录 : src/cache.js#34 --> 


p.put = function (key, value) { 


var removed 
if (this.size --- this.limit) ( 


removed = this.shift() 


较 


熟悉 


NY 


TON 9 
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var entry = this.get (key, true) 
if (lentry) { 
entry - ( 
key: key 
} 
this. keymap[key] = entry 
if (this.tail) { 
this.tail.newer = entry 
entry.older = this.tail 
] else { 
this.head = entry 
} 
this.tail = entry 
this.sizet+ 
} 


entry.value = value 


return removed 


22.5 shift 


shift 删除 Cache 里 面 最 近 最 少 使 用 的 项 ， 返 回 被 删除 的 。 


<!-- 源 码 目录 : src/cache.js466 --» 


p.shift = function () { 

var entry = this.head 

if (entry) { 
this.head = this.head.newer 
this.head.older = undefined 
entry.newer = entry.older = undefined 
this. keymap [entry.key] = undefined 
this.size-- 

} 


return entry 
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22.6 get 


get 接受 参数 key， 返 回 对 应 的 值 。 


<!-- 源 码 目录 : src/cache.js#87 --> 


p.get = function (key, returnEntry) { 
var entry - this. keymap[key] 
if (entry === undefined) return 
if (entry === this.tail) { 
return returnEntry 
? entry 


entry.value 


// HEAD-------------- TAIL 
// <.older  .newer» 
// <--- add direction -- 


// A B C «D» E 
if (entry.newer) { 

if (entry === this.head) { 

this.head = entry.newer 

} 

entry.newer.older = entry.older // C <-- E. 
} 
if (entry.older) | 

entry.older.newer = entry.newer // C. --» E 
} 
entry.newer = undefined // D --x 
entry.older = this.tail // D. --> E 
if (this.tail) { 

this.tail.newer = entry // E. «-- D 
} 
this.tail = entry 
return returnEntry 

? entry 


entry.value 
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其 实 很 多 同学 都 使 
下 相关 的 具体 实现 。 


过 props 配置 给 组 件 元 素 设置 一 些 


"uni 
可 


性 ， 本 章 我 们 从 源码 


23.1 ”流程 设计 


我 们 看 一 下 初始 化 props 的 流程 ， 如 图 23-1 所 示 。 


_init(options) _initState 


var props = options.props; 


el = options.el = query(el); 


el && el.nodeType === 1 && prop 


Ye 


s 
compileAndLinkProps(vm, el, props, scope) 


compileProps(el, props, vm) 


while (i--) 9 


getBindAttr(el, attr)) 


makePropsLinkFn(props) 


图 23-1 ”props 初 始 化 流程 图 
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我 们 设计 了 一 个 didi-list 列表 组 件 ， 它 有 两 个 属性 : 


<!-- didi-list props --> 


export default { 
props: { 
gridData: Array, 


fields: Array 


compileProps 解析 后 的 结果 如 图 23-2 所 示 。 


path: path, path = "gridData" 


attr = hyphenate(name); attr = "grid-data", name = "gridDa 


} v prop: Object 
mode: 0 
prop = { prop = Object (name: "gridData", path: "gridData" name: "gridData" 
name: name, name - "gridData" 


v options: Object 


options: options, options = Object 1) > type: function Array() 
mode: propBindingModes.ONE WAY, > proto : Object 
raw: null path: "gridData" 

h raw: null 


M. proto : Object 


图 23-2 ”compileProps 转 换 gridData 


gridData 会 通过 hyphenate 函数 将 gridData 转换 成 符合 kebab-case( 短 横 
如 图 23-3 所 示 。 


线 ) 规 则 的 grid-data, 


var hyphenateRE = /([a-z\d])([A-Z])/g; 


function hyphenate(str) { str = "gridData" 


return str.replace(hyphenateRE, '$1-$2').toLowerCase(); 
} 


图 23-3 hyphenate 实 现 转换 


如 图 23-4 所 示 是 filelds 的 转换 。 


mode: propBindingModes.ONE WAY, 
raw: null 


attr = hyphenate(name); attr = "fields", name = "fields" raw: null 


H v Watch + C 
prop = { prop = Object {name: "fields", path: "fields", op Y Prop: Object 
name: name, name = "fields" mode: @ 
path: path, path = "fields" name: "fields" 
options: options, options = Object {} v options: Object 


> type: function Array( 
h > proto : Object 
path: "fields" 


图 23-4 ”compileProps 转 换 fields 


如 图 23-5 所 示 是 gridData 的 转换 成 内 部 prop HR. 
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如 图 23-6 所 示 是 fields 的 转换 成 内 音 


23.2 


其 实在 编译 props 时 ， 会 对 属性 name 进行 一 些 验证 处 理 。 


Object 


dynamic: true 
filters: undefined 
mode: 0 
name: "gridData" 

ly options: Object 
> type: function Array() 
>_ proto : Object 
parentPath: "gridData" 
path: "gridData" 
raw: "gridData" 


K prop 对 象 。 


图 23-5 ”gridData 的 对 象 prop 


属性 name 


看 下 面 的 源码 片段 : 


<!-- 源 码 


export function compileProps (el, 


var props = [] 


var names = Object.keys (propOptions) 


var i 


var options, name, attr, value, 


while 


name 


= names.length 


(i--) ( 


= names[i] 


options = propOptions[name] || 


if (process.env.NODE ENV !-- 'production' 


warn('Do not use $data as prop.', vm) 


continue 


Object 


dynamic: true 
filters: undefined 
mode: 0 
name: "fields" 

v options: Object 
> type: function Array() 
M proto : Object 
parentPath: "fields" 
path: "fields" 
raw: "fields" 


3X: src/compiler/compile-props.js --> 


图 23-6 fields «prop 


propOptions, vm) { 


path, parsed, prop 


&& name === 'Sdata') { 


// props could contain dashes, which will be 


// interpreted as minus calculations by the parser 
// so we need to camelize the path here 


path = camelize (name) 
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if 


process.env.NODE ENV 
'Invalid prop key: 
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(!identRE.test(path)) { 


wt 


+ name + 


'production' 


n 


'must be valid identifiers.', 


vm 


) 


continue 


29.9 


在 coerce 属性 配置 


coerce 


«1-5 


function 


EX 


var coerce 
if (!coerce) { 
return value 


} 


coerceProp 


看 下 面 的 源码 片段 : 


(prop, 


// coerce is a function 


return coerce (value) 


23.4 


type 验证 


type 可 以 设置 常见 的 类 型 ， 


value) { 


prop.options.coerce 


&& warn( 


Prop keys 


LE BRAT AY VA C EUER ERR 


src/compiler/compile-props.js --> 


也 支持 自 定义 。 


<!-- 源 码 目 录 : src/compiler/compile-props.js --> 
function assertType (value, type) ( 
var valid 
var expectedType 
if (type === String) { 
expectedType = 'string' 
valid = typeof value --- expectedType 
) else if (type === Number) { 
expectedType - 'number' 


+ 
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<!-- 源 码 目录 ; 
function getPropDefaultValue (vm, prop) { 


valid = typeof value --- expectedType 


else if 


(type === Boolean) { 
expectedType = 'boolean' 
valid = typeof value === expectedType 


else if 


(type === Function) { 
expectedType = 'function' 
valid = typeof value === expectedType 


else if 


(type === Object) { 


expectedType = 'object' 
valid = isPlainObject (value) 
else if (type === Array) { 
expectedType = 'array' 
valid = isArray (value) 
else { 


valid = value instanceof type 


return { 
valid, 


expectedType 


23.5 default 


default 可 以 设置 一 些 默认 值 。 


看 下 面 的 源码 片段 : 


src/compiler/compile-props.js --» 


// no default, return undefined 
const options = prop.options 

if (!hasOwn(options, 'default')) { 

// absent boolean value defaults to false 
return options.type --- Boolean ? false undefined 

} 

var def = options.default 

// warn against non-factory defaults for Object & Array 


if (isObject(def)) { 
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process.env.NODE ENV !-- 'production' && warn( 
'Invalid default value for prop "' + prop.name + '": ' + 
"Props with type Object/Array must use a factory function ' + 
'to return the default value.', 


vm 


} 
// call factory function for non-Function types 


return typeof def === 'function' && options.type !== Function 
? def.call (vm) 


def 


23.6 validator 


validator 可 以 设置 自 定 义 的 验证 函数 。 


看 下 面 的 源码 片段 : 


<!-- 源 码 目录 : src/compiler/compile-props.js --» 


var validator = options.validator 


if (validator) { 


if (!validator(value)) { 


process.env.NODE ENV !== 'production' && warn ( 
"Invalid prop: custom validator check failed for prop "' + prop.name + '". 
vm 


) 


return false 


第 24 x 
JE tO events 


前 面 我 们 介绍 过 通过 methods 对 象 配置 来 给 模板 DOM 元 素 绑 定 事 件 ， 那 么 如 何在 Vue.js 
实例 之 间 以 及 父子 类 之 间 通 过 事件 来 通信 呢 ? 我 们 可 以 通过 events 这 个 配置 项 来 实现 。 


24.1 events 配置 是 什么 


其 实 可 以 理解 为 一 个 简单 的 配置 对 象 ; 

O Key 是 在 实例 事件 比如 $emit 调用 时 传 入 的 参数 。 

O Value 是 处 理 函 数 (当然 也 可 以 是 methods 里 面 配置 的 方法 名 )。 我 们 可 以 在 Vue 实例 化 
时 通过 类 似 methods 的 配置 项 events。 


24.2 ”如 何 配 置 


和 methods 配置 一 样 ， 也 是 一 个 对 象 。Key 是 监听 的 事件 名 称 ，Value 是 对 应 的 处 理 函 数 。 
1E new Vue 的 实例 化 过 程 中 ，Vue 实例 会 调用 events 对 象 的 每 一 个 Key， 如 图 24-1 所 示 。 
图 24-1 比较 大 ， 我 们 可 以 逐步 拆 解 ， 看 如 下 代码 示例 : 
<script> 


<!-- new Vue 实例 化 --» 


var vm = new Vue({ 


events: 1 
sayHi: function (msg) { 
console.log("Hello, this is:" + msg); 
} 
} 
} 
</script> 
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我 们 在 实例 化 时 传 入 了 一 个 events 对 象 ， 如 图 24-2 所 示 。 


events 是 一 E 
TRIS 


peof handler === function 


typeof handler === 'string' 


ym. $options. methods[handler] > 


<fandler && typeof handler === ‘object 


图 24-1 events 初 始 化 流程 图 
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Vue.prototype._init 


图 24-2 ”实例 化 methods 第 


m— : registerComponentEvents(this, options.el) 


registerCallbacks (vm, action, hash) 


registerCallbacks 和 register 执行 流程 分 别 如 图 24-3. Al 24-4 所 示 。 
7 
* Register callbacks for option events and watchers. X Watch ne 
* > vm: Vue 
action: "$on" 


* @param {Vue} vm 

* @param {String} action 
* @param {Object} hash 
*/ 


function registerCallbacks(vm, action, hash) { 


if (!hash) return; 

var handlers, key, i, j; 

for (key in hash) { 
handlers - hash[keyl; 


if (isArray(handlers)) 4 
for (i = 0, j = handlers.length; i < j; i+) { i= 
register(vm, action, key, handlers[il); 


) else 1 


hash = Object {} 


handlers = function sayHi(msg), key = "sayHi", i = undefined, j = undefined 


handlers = function sayHi(msg) 


undefined, j = undefined 
vm = Vue {$el: null, $parent: undefined, $root: Vue, $chi 


vm = Vue {$el: null, $parent: undefined, $root: Vue, $chil¢ w Call Stack 


register(vm, action, key, handlers); 


* hash: Object 
> sayHi: function sayHi(msg) 
b proto : Object 
Asyn 
vue.common.js?e881:810 
registerCallbacks 
vue.common.js?e881:805 
Vue. initEvents 


vue.common.js?e881:245 
Vue._init 


Vue vue.common.js?e881:947. 
(anonymous main.js?3479: 
function) 


2) 


registerCallbacks 执 行 流程 图 


图 24-3 


events 的 $on 执行 流程 如 图 24-5 所 示 。 它 操作 this. events 对 象 ， 把 我 们 之 前 传 入 的 sayHi 


当成 key， 对 应 的 处 理 函数 当成 它 的 处 理 函 数 。 
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TE v Watch ak | 
* Helper to register an event/watch callback. 
* bvym: Vue 
* @param {Vue} vm action: "$on" 
* @param (String) action key: "sayHi" 
* (param {String} key b handler: function sayHi(msg. 
* (param {Function|String|Object} handler options: undefined 
* @param {Object} [options] 
*/ Y Call Stack LJ Asyn| 
function register(vm, action, key, handler, options) { vm = Vue {$el: null, $parent: undefined, $root: Vue, E vue.common.js?e881:811 
var type = typeof handler; type = "function" register 
if (type 'function') { 


vue.common.js?e881:810| 
registerCallbacks 


vm[action](key, handler, options); 
} else if (type 'string' 
var methods = vm.$options.methods; 
var method = methods && methods [handler]; 
if (method) ( 
vm[actionl(key, method, options); 


vue.common.js?e881:805| 
Vue. initEvents 


vue.common.js?e881:245| 


) else { Vue. init 
process.env.NODE ENV !== 'production' && warn('Unknown method: "' + handler + '" when ' + 'registering 
Vue vue.common.js?e881:947 
) else if (handler && type === 'object') { Tem d 
register(vm, action, key, handler.handler, handler); (anonymous main.js?3479: 
) function) 
} (anonvmous app.is.60| 
Trj Fa 
图 24-4 register 执 行 流程 图 
ate 4 : v Watch t 
: Listen on the given ‘event’ with `fn`. event: "sayHi" 
* (param {String} event fn: function sayHi(msg) 
* @param (Function) fn wthis. events: Object 
*/ * sayHi: Array[1] 
- : R b proto : Object 
Vue.prototype.$on = function (event, fn) ( event = "sayHi", fn = function sayHi(msg) 
(this. events[event] || (this. events[event] = [])).push(fn); Y Call Stack DAs 
WO er CO Sienna | vue.common.js?e881:9 
m y Vue.$on 


/ 


图 


24-5 ”events 的 $on 执 行 流程 图 


24-6 所 示 。 


events 的 modifyListenerCount 执行 流程 如 图 


v Watch * 

/** 

* Modify the listener counts on all parents. Pvm: Vue 

* This bookkeeping allows $broadcast to return early when event: "sayHi" 

* no child has listened to a certain event. hookRE.test(event): false 

* count: 1 

* @param {Vue} vm !parent || !count || hookRE.test(event): true 
* @param {String} event !count: false 

* @param (Number) count 

*/ Y Call Stack — Asyl 
var hookRE = /^hook:/; modifyListenerCount vue.common.js?e881:93| 
function modifyListenerCount(vm, event, count) ( vm = Vue {$el: null, $parent: undefing Vue.$on vue.common.js?e881:92| 

var parent - vm.$parent; parent - undefined 

// hooks do not get broadcasted so no need register vue.common.js?e881:81 

// to do bookkeeping for them T P 

if (!parent || !count || hookRE.test(event)) return; parent = undefined, count = 1, € registerCallbacks vue.common.js?e881:81 

while (parent) { Vue. initEvents vue.common.js?e881:80| 

parent. eventsCount[event] = (parent. eventsCount[event] || 0) + count; event = "sc 
parent = parent.$parent; Vue._init vue.common.js?e881:24| 
} Vue vue.common.js?e881:94| 
A. $ 3 AS E 
图 24-6 _ events 的 modifyListenerCount 执 行 流程 图 


24.2.1 $emit 触发 


了 解 了 events 参数 中 
如 下 : 


vm.Semit (event, [..args]) 


ial 


有 件 是 如 何 绑 定 的 ， 现 在 我 们 来 看 一 下 如 何 触 发 它 ， 使 用 $emit， 语 法 


n 
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<script> 
<!-- new Vue 实例 化 --» 
var vm = new Vue({ 
events: { 
sayHi: function (msg) { 


console.log('Hello, this is:' + msg) 


}) 


<!-- Semit 触发 --> 
vm.Semit('sayHi', 'DDFE') 


«/script» 


vm 调用 $emit 的 调试 如 图 24-7 所 示 。 


9286 Vue.prototype.$emit = function (event) ( event = "sayHi" 

9287 var isSource = typeof event === 'string';  isSource = true 

9288 event - isSource ? event : event.name; 

9289 var cbs = this. events[event]; cbs = [function function] 

9290 var shouldPropagate = isSource || !cbs; shouldPropagate = true, isSource = true 
9291 if (cbs) { 

9292 cbs = cbs.length > 1 ? toArray(cbs) : cbs; 

9293 // this is a somewhat hacky solution to the question raised 

9294 // in #2102: for an inline component listener like «comp @test="doThis">, 

9295 // the propagation handling is somewhat broken. Therefore we 

9296 // need to treat these inline callbacks differently. 

9297 var hasParentCbs = isSource && cbs.some(function (cb) ( hasParentCbs = false, isSource = true, cbs = [function function], 
9298 return cb. fromParent; 

9299 n; 

9300 if (hasParentCbs) { hasParentCbs = false 

9301 } shouldPropagate = false; shouldPropagate = true 

9302 

9303 var args = toArray(arguments, 1); args = ["DDFE"], arguments = ["sayHi", "DDFE"] 
9304 for (var iz 0, l = cbs. length; 12e; 3E) i = 0, l= 1, cbs = [function function] 
9305 var cb = cbs[i]; cb = function sayHi(msg) 

9306 var res = cb.apply(this, args); res = undefined, args = ["DDFE"] 

9307 if (res === true && (!hasParentCbs || cb.  fromParent)) { 

9308 shouldPropagate - true; 

9309 ) 

9310 l 

9311 } 

9312 return shouldPropagate; 

9313 Hh 


图 24-7 $emit 调 试 


我 们 来 看 如 下 源码 实现 : 


<!-- 源 码 目录 : src/instance/api/events.js491 --» 


Vue.prototype.Semit = function (event) { 
// 我 们 传 入 的 是 字符 串 类 型 的 sayHi 
// 所 以 isSource 返回 true 


var isSource = typeof event --- 'string' 


event - isSource ? event : event.name 
// 直接 从 this. events 这 个 对 象 里 面 获取 
var cbs = this. events[event 
// 这 里 返回 true 
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var shouldPropagate = isSource || !cbs 
if (cbs) { 
cbs = cbs.length > 1 ? toArray(cbs) : cbs 


var hasParentCbs = isSource && cbs.some(function (cb) { 
return cb. fromParent 
} 
if (hasParentCbs) { 
shouldPropagate = false 
} 
var args = toArray(arguments, 1) 
for (var i= 0, 1 = cbs.length; i < 1; i++) { 
var cb = cbs[i] 
// 最 终 还 是 调用 apply 把 上 面 传 递 的 参数 再 传 给 监听 函数 


var res = cb.apply(this, args) 


if (res === true && (!hasParentCbs || cb. fromParent)) { 


shouldPropagate - true 


} 


return shouldPropagate 


24.2.2 $once SE 


rr 


只 触发 一 次 ， 触 发 完成 后 就 删除 了 。 


相 比 前 面 流程 示例 中 的 Son，$once 绑 定 的 事 从 


$on 的 语法 如 下 : 
vm. $once (event, callback) 
我 们 来 看 如 下 源码 实现 : 


<!-- 源 码 目录 : src/instance/api/events.js#26 --» 


Vue.prototype.Sonce = function (event, fn) { 
var self = this 
function on () { 
// 依赖 Soft 
self.Soff(event, on) 
// 最 终 还 是 apply 
fn.apply(this, arguments) 
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on.fn = fn 
// 依赖 Son 
this.$on(event, on) 


return this 


24.2.3 Soff 删除 


LA ASL, Soff MRE MUT PRU e 
Soff 的 语法 如 下 : 


vm.Soff([event,callback]) 


O 没有 参数 ， 删 除 所 有 的 事件 监听 函数 。 


O 只 有 事件 名 称 ， 删 除 这 个 事件 名 称 对 应 的 所 有 监听 函数 。 


lini 


O 同时 指定 事件 名 称 和 对 应 的 监听 函数 ， 上 只 删除 对 应 的 。 
我 们 来 看 如 下 源码 实现 : 


<!-- 源 码 目录 : src/instance/api/events.js#45 --» 


Vue.prototype.Soff = function (event, fn) { 
var cbs 
// all 
// 10 -> true 
if (!arguments.length) { 
if (this.Sparent) { 
for (event in this. events) { 
cbs = this. events[event] 
if (cbs) { 
modifyListenerCount (this, event, -cbs.length) 


} 
// EAMA 


this. events = {} 


return this 
} 
// specific event 
cbs = this. events[event] 
if (!cbs) { 


return this 
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} 
if (arguments.length === 1) { 
// 删除 这 个 事件 对 应 的 所 有 监听 函数 


modifyListenerCount(this, event, -cbs.length) 


this. events[event] - null 
return this 
} 
// specific handler 
var cb 
var i = cbs.length 
while (i--) ( 
cb = cbs[i] 
if (cb === fn || cb.fn === fn) { 
modifyListenerCount(this, event, -1) 
cbs.splice(i, 1) 


break 


} 


return this 


24.2.4 $dispatch 派发 


就 直接 return 了 。 


$dispatch 的 语法 如 下 : 


vm.Sdispatch (event, [..args]) 


我 们 来 看 如 下 源码 实现 : 


<!-- 源 码 目录 : src/instance/api/events.js#163 --» 


Vue.prototype.$dispatch = function (event) 
// 先 调 用 $emit 执行 一 次 


站 先 在 实例 上 触发 4on 对 应 绑 定 的 监听 函数 ， 然 后 治 


{ 


44 $parent 向 上 冒 泡 。 如 果 返 回 false, 


var shouldPropagate = this.Semit.apply(this, arguments) 


// 判断 参数 ，false 就 return 了 
if (!shouldPropagate) return 
var parent = this.$parent 


var args = toArray (arguments) 


// use object event to indicate non-source emit 


// on parents 
args[0] = { name: event, source: this } 


// 沿 着 父 链 
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while (parent) { 
shouldPropagate = parent.$emit.apply(parent, args) 
parent = shouldPropagate 
? parent.Sparent 
null 
} 


return this 


24.2.5 $broadcast 广播 


遍历 当前 所 有 $children， 需 要 返回 true， 不 然 就 中 止 了 。 


$broadcast 的 语法 如 下 : 
vm.$broadcast (event, [..args]) 
我 们 来 看 如 下 源码 实现 : 


<!-- 源 码 目录 : src/instance/api/events.js4131 --» 
Vue.prototype.$broadcast = function (event) { 


var isSource = typeof event --- 'string' 

event - isSource? event : event.name 

// if no child has registered for this event, 

// then there's no need to broadcast. 

if (!this. eventsCount[event]) return 

var children = this.$children 

var args = toArray (arguments) 

if (isSource) { 
// use object event to indicate non-source emit 
// on children 
args[0] = { name: event, source: this } 

} 

for (var i= 0, 1 = children.length; i < 1; i++) { 
var child = children[i] 
var shouldPropagate = child.Semit.apply(child, args) 
// 子 类 的 子 类 必须 返回 true 
if (shouldPropagate) { 

child.$broadcast.apply(child, args) 


} 


return this 
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Webpack 


Webpack 是 一 个 模块 化 加 载 器 ， 


器 相 比 ， 它 具有 以 下 优势 : 
1， 代 码 分 割 


Webpack 支持 两 种 依赖 加 载 : 同步 和 异步 。 


它 同时 支持 AMD、CMD 等 加 载 规 范 。 


司 步 的 依赖 会 在 编译 时 直接 打包 输出 到 目的 文件 


与 其 他 模块 化 加 载 


中 ; 异步 的 依赖 会 单独 生成 一 个 代码 块 , 具有 在 浏览 器 中 运行 需要 的 时 候 才 会 异步 加 载 该 代码 块 。 


2. Loaders 


换 为 JS 输出 。 
3. 插件 机 制 


Webpack 提供 了 强大 的 插件 系统 ， 当 Webpack 内 置 的 功能 


在 默认 情况 下 ，Webpack 


们 可 以 通过 使 用 插件 来 提高 工作 效率 。 


25.1 ”安装 


$ npm i webpack -9 


除了 全 局 安装 , 我 们 也 


全 局 安装 ， 执 行 如 下 命令 


只 能 处 理 JS 文件 ， 但 是 通过 加 载 器 我 们 可 以 将 


不 能 满 


可 以 将 Webpack 作为 项 目 依 赖 在 项 


En 


我 们 可 以 在 不 同 的 项 目 中 使 


首先 ， 我 们 使 用 npm 命 


$ npm init 


JA EHI Webpack 版 本 。 


令 初 始 化 npm 项 目 ， 执 行 如 下 命令 


进行 安装 。 XRF 


其 他 类 型 的 资源 转 


足 我 们 的 构建 需求 时 ， 我 


做 的 好 处 是 ， 
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R 


然后 ， 运 行 以 下 命令 在 项 目 中 安装 Webpack， 并 | 
devDependencies 中 : 


其 写 入 packagejson 依赖 字段 


$ npm i webpack -save-dev 


25.2 ”基本 使 用 


我 们 先 来 看 一 个 最 简单 的 基于 Webpack 命令 行 参 数 打包 的 例子 。 假 定 有 以 下 目录 结构 ; 


example 
|- app.js 
|- cats.js 


下 面 我 们 看 看 各 文件 内 容 ， 基 于 CommonJS 规范 引用 依赖 文件 ， 代 码 示例 如 下 : 


// cats.js 

var cats = ['dave', 'henry', 'martha'] 
module.exports = cats 

// app.js 入 口 文件 


cats = require('./cats.js') 


console.log(cats) 


app.js 是 项 目的 JavaScript 入 口 文件 ，Webpack 将 会 从 该 文件 开始 对 依赖 文件 进行 打包 。 


我 们 通过 Webpack 命令 指定 要 打包 的 入 口 文件 app.js 和 最 终 输出 文件 app.bundle.js 来 打包 
应 用 ， 执 行 如 下 命令 : 


$ webpack ./app.js app.bundle.js 


以 上 命令 运行 后 ，Webpack 会 解析 依赖 的 文件 ,然后 打包 输出 到 app.bundle.js 文件 。 图 25-1 
演示 了 Webpack 打包 过 程 。 


现在 我 们 可 以 在 node 中 运行 打包 后 的 app.bundle.js 文件 来 看 看 效果 ， 执 行 如 下 命令 


$ node app.bundle.js 


["dave", "henry", "martha"] 


我 们 在 node 环境 中 进行 了 演示 ， 实 际 上 Webpack 打包 后 的 代码 可 以 运行 在 任何 环境 
包括 浏览 器 环境 。 
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cats.js 


var cats - ['d 
module.exports 


app.js 


console.log(ca 


© webpack reads the entry point and analyzes 
ave', 'henry', 'martha']; : its dependencies, its dependencies 
= cats; ! dependencies, and so on. 


var cats -|require('./cats.js') Mm 


[ES 


us 


webpack 


MODULE BUNDLER 


webpack bundles the entry point app. bundle. js 
and all its dependencies into a !function(r){function t(o)fif(n[o])return n[o].exports; 
single file. var e=n[o]={i:0,l:!1,exports:{}};return r[o].call( 


253 ”命令 行 


1E252 节 中 ， 我 们 学 习 了 如 何 使 月 


e.exports,e,e.exports,t),e.l=!0,e.exports}var n={}; 
return t.m=r,t.c=n,t.p="",t(t.s=1)}([function(r,t){ 
var n=["dave","henry","martha"];r.exports=n}, function 
(r,t,n){cats=n(0) ,console.log(cats)}]); 


图 25-1 Webpack 打 包 过 程 


$ webpack <entry><output> 


entry 为 要 打包 的 入 口 文 伯 


路 径 ，output 为 打包 后 的 文件 路 径 。 


Webpack 命令 还 提供 了 很 多 参数 供 我 们 自 定 义 打包 过 程 ， 下 面 介 绍 一 
O -p， 对 打包 后 的 代码 进行 压缩 。 
--watch， 文 件 发 生变 化 时 ， 重 新 打包 。 


Q 
O --config， 指 定 Webpack 打包 配置 文件 ， 稍 后 会 详细 介绍 配置 文件 。 
Q 


--progress， 在 终端 显示 打包 过 程 。 


25.4 配置 文件 


通过 Webpack 命令 


项 


的 根 目 录 下 提供 


录 下 不 提供 参数 直接 调 


$ webpack 


个 配置 文件 ， 在 配置 文 伯 


rH 


| webpack 命令 : 


H Webpack 命令 进行 简单 打包 ， 语 法 如 下 : 


行 传 参 ， 我 们 可 以 进行 简单 的 打包 构建 。 对 于 复杂 的 打包 ， 我 们 可 以 在 


POLST Li EET E TEA 


的 配置 。 在 项 目 根 目 
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Webpack 默认 会 调用 项 目 根 目录 下 的 webpack.configjs 文件 ， 我 们 也 可 以 通过 -config 参数 
指定 配置 文件 ， 执 行 如 下 命令 : 


$ webpack -config webpack.config.build.js 


// webpack.config.js 


module.exports - ( 


// 配置 选项 


配置 文件 的 内 容 需要 通过 module.exports 进行 导出 ， 代 码 示例 如 下 : 


现在 我 们 看 一 下 Webpack 中 包含 的 配置 选项 ， 如 图 25-2 所 示 。 


externals 


target 


| cache 
| loader 


devServer 


l plugins 


context 1 


entry | 


output 


module 


resolve 


resolveLoader 


图 25-2 ”配置 选项 


接 下 来 介绍 几 个 常 


选项 的 含义 及 用 法 。 


25.4.1 context 


context 选项 用 来 配置 基础 路 径 〈 必 须 为 绝对 路 径 )， 默 认为 process.cwd()， 即 运行 webpack 


命令 的 目录 。 
25.4.2 entry 


entry 选项 用 来 配置 要 打包 的 入 口 文件 ， 值 可 以 是 字符 串 、 数 组 、 对 象 。 该 选项 指定 的 路 径 
会 相对 context 选项 指定 的 路 径 进 行 查 找 。 
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1. 字符 串 


直接 指定 路 径 ， 该 路 径 相 对 于 context 选项 。 


entry: "./entry" 
2. 数组 
路 径 数 组 ，Webpack 会 按 序 打包 ， 但 是 只 导出 最 后 一 个 文件 。 
entry: ["./entryl", "./entry2"] 
3. WR 
当 entry 值 为 对 象 时 ， 键 名 为 块 名 ， 可 以 随意 指定 ， 键 值 可 以 为 字符 串 或 数组 类 型 。 该 块 名 
可 以 在 output 选项 中 使 用 ， 代 码 示 例如 下 : 
{ 
entry: { 
pagel: "./pagel", 
page2: ["./entryl", "./entry2"] 
Fz 
output: { 


// 打包 后 输出 文件 名 ，name X entry H 


FP 对 应 的 键 名 


filename: "[name].bundle.js" 
} 
} 
以 上 选项 配置 后 ， 运 行 命令 在 项 目 根 目录 下 会 生成 pagel.bundle.js 和 page2.bundle.js 文件 。 


25.4.3 output 


output 选项 可 用 来 配置 输 
output.filename 
配置 打包 后 的 文件 名 ， 注 章 
filename 会 相对 output.path 24; H 


// 单 入 
{ 


entry: 


示例 


'./src/app.js', 
( 


filename: 


output: 
'bundle.js', 


出 信息 : 


值 不 是 绝对 路 径 。 我 们 应 
出 ， 代 码 示例 如 下 : 


该 通过 


过 output.path HFS RE HTH 
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path: _ dirname + '/build' 
} 
} 
// 写 入 磁盘 路 径 为 ./buildq/bundle.js 
如 果 项 目 有 多 个 入 口 ， 对 于 每 个 入 口 打包 后 的 文件 名 我 们 需要 保证 其 唯一 性 。Webpack 提 
供 了 以 下 模式 来 动态 生成 输出 文件 名 : 


O [name]， 入 口 文件 块 名 。 


O [hash]， 每 个 入 口 打包 后 的 hash 值 。 


O [chunkhash]， 在 使 用 代码 分 制 时 ， 异 步 加载 的 文件 的 hash 值 。 


// 多 入 口 示例 
{ 
entry: { 


app: './src/app.js', 
search: './src/search.js' 
}, 
output: { 
filename: '[name].js', 
// filename: '[hash].js', 
// filename: '[chunkhash].js', 
path: _ dirname + '/build' 
} 
} 
// "SAREE IEA ./build/app.js. ./build/search.js 


output.path 一 一 打包 后 的 文件 的 根 目录 (绝对 路 径 )。 


25.4.4 module 


module 选项 用 来 进行 模块 加 载 相 关 配 置 。 


module.loaders 一 一 加 载 器 数组 ， 当 依赖 文件 匹配 指定 的 test 模式 时 ，Webpack 会 自动 调用 
数组 中 的 相应 加 载 器 去 处 理 该 文件 ， 然 后 返回 JS 格式 的 文件 。 


加 载 器 是 一 个 对 象 ， 该 对 象 拥有 以 下 属性 : 


O test 一 一 正则 表达 式 ，Webpack 用 其 去 匹配 相应 的 文件 ， 通 常用 来 匹配 文件 后 绥 。 


O exclude 一 一 不 应 该 被 loader 处 理 的 文件 。 
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O include 一 一 一 个 路 径 数 


Z 


O loader — test PEH 
之 间 用 “!” 分 隔 


cu 


o 


代码 示例 如 下 : 


{ 

loaders: 
// 
test: 


module: 


[ 


匹配 j sx 后 级 的 文件 
/NGS 


组 ， 这 些 路 径 将 会 被 loader 处 到 


T 


o 


的 文件 对 应 的 加 载 器 , 值 是 一 个 加 载 器 名 字 字 符 串 ,多 个 加 载 器 


// include 中 的 目录 会 被 loader 解析 


include: [ 
path.resolve( dirname, 
path.resolve(  dirname, 


] r 


"app/src"), 
"app/test") 


// babel loader, iZ loader 可 以 


loader: "babel-loader" // 


25.4.5 resolve 


resolve 3t Jit FH ofc Bo Er Hot c f 


来 解析 ES 6 语法 
或 者 "babel", 


Webpack 将 会 自动 添加 '-loader' 


的 文件 后 级 等 。 
1. resolve.alias 


该 选项 用 来 配置 依赖 文 伯 
2. 


resolve.root 


该 选项 用 来 指定 模块 的 查找 根 路 径 ， 必 须 为 纪 


若是 路 径 数 组 ，Webpack 会 
径 中 查找 。 代 码 示例 如 下 : 


// webpack.config.js 


var path = require('path'); 


IL vus 


的 匹配 ， 如 依赖 文 从 


别名 配置 、 模 块 的 查找 目录 、 默 认 碍 找 


的 别名 ， 值 是 一 个 对 象 ， 该 对 象 的 键 是 别名 ， 值 是 实际 路 径 。 


色 对 路 径 , 值 可 以 是 路 径 字 符 上 


或 者 路 径 数组 。 


依次 在 这 些 路 径 中 查找 ， 如 果 找 到 则 终止 ， 否 则 会 继续 在 下 一 个 路 


第 25 章 Webpack 435 


resolve: { 
root: [ 
path.resolve('./app/modules'), 


path.resolve('./vendor/modules') 


3. resolve.modulesDirectories 


该 选项 用 来 指定 模块 目录 , 值 是 一 个 路 径 数组 , 默认 值 为 ["web_modules", "node modules"]. 


25.4.6 devServer 


devServer 选项 可 用 来 配置 webpack-dev-server 的 行为 。 以 下 代码 用 来 指定 服务 的 根 路 径 : 


devServer: { 


contentBase: "./build", 


255 ”开发 调试 


开发 代码 时 ， 调 试 是 必 不 可 少 的 。 我 们 可 以 使 用 webpack-dev-server 在 浏览 器 中 进行 调试 。 


webpack-dev-server 是 一 个 基于 Express 的 Node.js 服务 器 。 在 文件 发 生 改 变 时 , 它 会 自动 触 
发 打包 过 程 ， 然 后 通过 Socket.IO 通知 浏览 器 刷新 页 面 ， 可 以 大 大 提高 工作 效率 。 


25.5.1 安装 


$ npm i -g webpack-dev-server 
25.5.2 ”启动 服务 


我 们 可 以 运行 以 下 命令 来 启动 服务 : 
$ webpack-dev-server 

不 带 参 数 运行 以 上 命令 ， 默 认 会 读 取 webpack.config.js 进行 打包 ， 我 们 可 以 通过 -config 来 
指定 配置 文件 。 详 情 请 参阅 25.5.3 节 。 
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25.5.3 命令 行 参数 


所 有 的 Webpack 命令 接受 的 参数 ，webpack-dev-server 都 可 以 接受 。 除 此 之 外 ,我 们 还 可 以 


向 webpack-dev-server 传递 额外 的 参数 。 下 面 我 们 来 看 一 些 常 


O --content-base， 指 定 请 求 的 根 路 径 。 


的 参数 。 


O --host， 指 定 服务 端 监听 的 地 址 可 以 是 IP 地 址 或 者 域名 。 当 值 为 0.0.0.0 时 ， 可 以 监听 一 


O --port， 指 定 服务 端 监听 的 端口 号 。 


O --compress， 启 用 gzip 压缩 。 


时 可 以 自动 刷新 浏览 


25.5.4 ”配置 文件 


台 机 器 的 所 有 IP 地 址 ， 如 127.0.0.1 或 机 器 在 


局 域 网 中 的 TP. 地 址 。 


O --inline， 自 动 将 SocketIO 代码 注入 到 打包 后 的 文件 中 。 局 用 该 选项 ， 当 文件 内 容 改变 


除了 通过 命令 行 传 参 来 配置 webpack-dev-server 外 ， 我 们 还 可 以 通过 Webpack 配置 文件 如 


默认 的 webpack.config.js 中 的 devServer 选项 对 其 i 


中 进行 设 定 。 例 如 : 
// webpack.config.js 
module.exports = { 
"a E 
devServer: { 
inline: true 


} 


25.6 ”使 用 插件 


在 Webpack 提供 的 基本 功能 不 能 


打包 的 各 个 过 程 。 


满足 需求 的 情 


况 下 ，Webpack 还 允许 我 们 使 用 插件 来 控 甫 


行 配置 , 所 有 命令 行 参数 都 支持 在 配置 文件 


= 
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25.6.1 安装 


我 们 需要 通过 npm 安装 相关 的 插件 ， 这 里 以 WebpackBrowserPlugin 为 例 ， 该 插件 用 来 在 
Webpack 或 webpack-dev-server 运行 完成 后 启动 浏览 器 。 


首先 安装 插件 ， 执 行 如 下 命令 : 
$ npm install --save-dev webpack-browser-plugin 


然后 在 webpack.config.js 中 引用 插件 ， 并 在 插件 选项 中 注册 该 插件 : 


// webpack.config.js 


var WebpackBrowserPlugin = require('webpack-browser-plugin'); 


module.exports = { 


plugins: [ 
new WebpackBrowserPlugin () 


] , 


如 果 是 Webpack 内 置 的 插件 ， 首 先 需 要 在 项 目 中 安装 Webpack， 执 行 如 下 命令 : 


$ npm install -save-dev webpack 
然后 在 配置 文件 中 引用 并 注册 插件 。 这 里 以 DefinePlugin 为 例 ， 该 插件 可 以 在 打包 时 替换 
指定 变量 : 
// webpack.config.js 
// 首先 需要 引入 Webpack 


var webpack = require('webpack'); 


module.exports = { 


plugins: [ 
// 注册 webpack 内 置 插件 


new webpack.DefinePlugin ({ 


VERSION: JSON.stringify("5fa3b9"), 


BROWSER SUPPORTS HTML5: true, 
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TWO: "141", 
"typeof window": JSON.stringify("object") 
} 
l; 


25.6.2 ”常用 插件 


下 面 介绍 几 款 Webpack 内 置 的 常用 插件 的 使 用 ， 插 件 的 安装 请 参阅 25.6.1 市 。 


1. DefinePlugin 
DefinePlugin 插件 用 来 替换 指定 变量 ， 代 码 示例 如 下 : 


// webpack.config.js 


var webpack = require('webpack'); 


module.exports = { 


plugins: [ 
new webpack.DefinePlugin ({ 
VERSION: JSON.stringify("5fa3b9"), 
BROWSER SUPPORTS HTML5: true, 
TWO: "1+1" 
} 
l; 


// 待 编 译 的 文件 

console.log("Running App version " + VERSION)// 编译 后 : console.log("Running App version 
"+ "5fa3b9") 

if (!BROWSER SUPPORTS HTML5) require ("html5shiv")// 编译 后 : if (!true) require ("html5shiv") 


var two = TWO// 编译 后 : var two = 141 

2. ProvidePlugin 

ProvidePlugin 可 以 自动 加 载 当前 模块 依赖 的 其 他 模块 并 以 指定 别名 注入 到 当前 模块 中 。 假 
如 当前 模块 依赖 jquery 模块 ， 同 时 我 们 想 在 模块 中 直接 用 “$” 引 用 jQuery 对 象 ， 但 是 不 想 手 
动 require jquery 模块 。 代 码 示 例如 下 : 
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// 当前 模块 
$ ("sitem") 


此 时 我 们 只 需要 在 Webpack 配置 文件 中 配置 ProvidePlugin 插件 将 jquery 模块 与 


量 即 可 。 代 码 示 例如 下 : 


// webpack.config.js 


var webpack = require('webpack'); 


module.exports = { 


plugins: [ 
// 自动 引入 jquery 模块 并 导出 为 $ 变量 ， 使 各 个 模块 可 以 直接 通过 “$” 来 引 


new webpack.ProvidePlugin ({ 


$: "jquery" 
} 
] $ 


T 
Er 


HA SE 


jQuery 对 象 
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Rollup 


“Webpack 2 输出 的 文件 比 起 Rollup 还 是 丑 啊 。 但 是 Rollup 针对 非 JS 资源 的 插件 生态 不 行 ， 
也 没有 热 蔡 换 ， 不 适合 用 在 应 用 层 。 所 以 现 阶段 我 还 是 用 Webpack 做 应 用 层 开 发 ， 用 了 Rollup 做 
库 的 dT &, o ^ 


一 一 尤 小 右 
26.1 简介 


在 开发 一 个 项 目 时 ， 我 们 会 将 项 目 拆 分 成 多 个 模块 ， 每 个 模块 完成 相对 独立 的 功能 ， 我 们 
可 以 很 方便 地 单独 开发 代码 。 很 可 能 存在 这 种 情况 : 项 目 依赖 很 多 第 三 方 组 件 ， 依 赖 组 件 都 很 
小 ， 这 对 于 浏览 器 来 说 是 非常 糟糕 的 ， 增 加 了 许多 请 求 ， 对 于 前 端 开 发 来 说 ， 严 重 影响 了 页 面 
加 载 速度 。 这 种 情况 必须 规避 。 


针对 上 面 情况 解决 办 法 有 很 多 ， 大 多 都 是 采用 模块 化 开发 方式 ， 使 用 模块 化 打包 工具 将 所 
有 文件 最 终 打包 到 一 个 单独 的 输出 文件 中 ， 大 大 减少 了 请 求 的 数量 。Browserify 和 Webpack 就 
是 这 样 的 打包 工具 。 


使 用 这 种 打包 工具 很 快 、 很 好 、 很 方便 。 但 是 我 们 是 否 注意 到 下 面 这 样 的 问题 : 


var utils = require( 'utils' ); 


var query - 'Rollup'; 


utils.ajax( 'https://api.example.com?search-' + query ).then( handleResponse ); 
我 们 引入 工具 函数 ， 但 其 实 只 想 使 用 它 的 ajax 方法 ， 传 统 的 打包 方式 是 将 所 有 代码 全 部 打 
包 ， 造 成 代码 元 余 。 


ES 6 解决 了 这 个 问题 ， 取代 了 引入 全 部 工具 函数 ， 可 以 只 引入 所 要 使 用 的 ajax 方法 。 代 码 
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示例 如 下 : 
import ( ajax } from 'utils'; 
var query - 'Rollup'; 


ajax( 'https://api.example.com?search-' + query ).then( handleResponse ); 


可 以 很 明显 地 体会 到 Tree-shaking 的 作用 一 一 bundle 文件 中 只 保留 了 utils 模块 里 的 ajax 方法 。 


另外 ，Tree-shaking 会 抽取 引用 到 的 模块 内 容 ， 将 它们 置 于 同一 个 作用 域 下 ， 进 而 直接 使 用 
变量 名 就 可 以 访问 各 个 模块 的 接口 ， 而 不 像 Webpack 那样 在 每 个 模块 外 还 要 包 一 层 函数 定义 ， 


通过 合并 进去 的 define/require 相互 调用 。 


7 


Rollup 是 下 一 代 ES 6 模块 打包 工具 。 它 采用 Tree-shaking 技术 , 利用 ES 6 模块 静态 分 析 语 
法 树 的 特性 ， 只 将 需要 的 代码 提取 出 来 打包 ， 大 大 减 小 了 代码 体积 。 可 以 预见 ， 未 来 的 各 种 框 
架 类 库 都 会 采用 ES 6 语法 编写 。 


26.2 ”安装 


全 局 安装 ， 执 行 如 下 命令 : 
$ npm install -g rollup 

另外 ， 如 果 我 们 在 npm run script 环境 中 使 用 Rollup 命令 ， 则 可 以 使 用 npmI-D rollup， 作 
为 每 一 个 项 目的 依赖 。 


26.3 ”配置 


大 多 数 选项 都 可 以 通过 命令 行 直 接 指 定 ， 但 是 我 们 希望 使 用 插件 的 配置 文件 ， 或 者 想 以 编 
程 方式 设置 选项 。 


配置 文件 本 身 只 是 一 个 JavaScript 模块 (我 们 也 可 以 使 用 require 和 module.exports )， 代 三 
示例 如 下 : 


import buble from 'rollup-plugin-buble'; 


export default { 
entry: 'src/main.js', 
dest: 'dist/bundle.js', 
format: 'umd', 
plugins: [ buble() ] 

}; 
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T 


将 会 输出 umd 格式 的 内 容 到 dist/bundle.js 文件 中 。 


HS 通过 命令 行 指定 的 参数 选项 将 会 履 盖 配置 文件 中 的 相应 选项 ， 如 果 要 实现 上 面 例子 中 
的 配置 输出 ， 则 可 以 在 命令 行 中 执行 如 下 命令 : 
$ -c-f umd -o dist/ bundle.cjs.js 

Rollup 允许 一 个 配置 文件 可 以 有 多 个 目标 文件 ， 我 们 可 以 生成 umd 格式 、ES Fc f 
都 是 来 自 同一 文件 ， 我 们 无 须 重复 工作 。 代 码 示例 如 下 : 


import babel from 'rollup-plugin-babel'; 


rr 


import babelrc from 'babelrc-rollup'; 


let pkg = require('./package.json'); 
let external = Object.keys (pkg.dependencies); 


export default { 
entry: 'lib/index.js', 
plugins: [babel (babelrc())], 
external: external, 
targets: [ 
{ 
dest: pkg['main'], 
format: 'umd', 
moduleName: 'rollupStarterProject', 
sourceMap: true 
}, 
{ 
dest: pkg['jsnext:main'], 
format: 'es6', 


sourceMap: true 


结果 目录 如 下 : 


I= dist 
|-rollup-starter-project.js 
|-rollup-starter-project.js.map 
|-rollup-starter-project.mjs.map 


|-rollup-starter-project.mjs.map 
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在 命令 行 中 ， 运 行 rollup -h 或 rollup -help 查看 命令 。 


rollup 


options] «entry file» 


命令 选项 如 下 : 


(1) 


-V 


版 本 号 。 


$ rollup 


rollup v 


(2) 


配置 文件 (默认 为 follup.configjs)。 如 果 配 置 文件 另 有 其 名 《例如 rollup.config.devjs), 1E 


AP 


ersion 0.32.0 


-C 


后 面 加 上 配置 文件 名 即 可 。 


$ rollup 


(3) 


-c rollup.config.dev.js 


-W 


PEFR EIERE o 


(4) 


(5) 


(6) 


-1 


FM --input。 


-0 


全 称 : --output。 


-f 


格式 化 生成 的 包 文件 ， 全 称 : --format。 文 持 如 下 参数 ， 


O amd 一 一 异步 模块 定义 ,目前 ,主要 有 两 个 JavaScript 库 实 现 了 AMD 规范 , 即 require.js 
和 curl.js. 


O cjs 一 一 CommonlJS 规范 。 
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O es6 (AKU) — ES 6 规范 。 
O ile — “AHT”, 放 入 <scripf> 标 签 中 。 


O umd 通用 模块 定义 。 


将 index.js 转换 为 amd 格式 ， 执 行 如 下 命令 : 


$ rollup --format amd -- lib/index.js > build/index.js 
结果 如 图 26-1 所 示 。 
define(['exports'], f t (exports) ( 'use strict'; 
** gg 
add(n, m) ( 
return n + m; 
h 
Ja 
function multiply(n, m, negative=false) {@ 
} 
exports.multiply = multiply; 
Object.defineProperty(exports, '  esModule', { value: true }); 
}); 


图 26-1 . amd 格式 输出 文件 


(7) -e 


全 称 : --external， 扩 展 插件 。 


m. 


数组 [Array] 一 一 外 部 依赖 模块 包 的 ID 列表 。ID 可 以 是 : 
O 外 部 依赖 项 的 名 称 。 


O resolved ID〔 例 如 一 个 文件 的 绝对 路 径 )。 


代码 示例 如 下 : 


// app.js 


import moment from 'moment'; 


setInterval(function() ( 
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var timeStr = moment().format('h:mm:ss a'); 
console.log('the time is ' + timeStr); 


), 1000); 


// build.js 


import * as path from 'path'; 


rollup.rollup ({ 
entry: 'app.js', 
external: [ 
'moment', 


path.resolve('./src/special-file.js') 


J).then(...) 


—— 
n 
o 


全 称 : --globals， 全 局 属性 ， 对 UMD/IIFE 模块 有 


Object :{ id: name} 


代码 示例 如 下 : 


var code = bundle.generate ({ 
format: 'iife', 
moduleName: 'MyBundle', 
globals: { 


backbone: 'Backbone', 


underscore: ' ' 
} 
}) .code; 
(9) -n 


PBR: --name, UMD/IIFE 模块 的 名 称 。 


代码 示例 如 下 : 


var code = bundle.generatel(t{ 


format: 'iife', 
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moduleName: 'MyBundle' 
}) .code; 


// -> var MyBundle = (function () {... 


(10) -u 


PBR: --id, AMD/UMD 模块 的 ido 


代码 示例 如 下 : 


var code = bundle.generatel(t{ 
format: 'amd', 
moduleId: 'my-bundle' 

}) .code; 


// -> define(['my-bundle'],... 


(11) -m 


全 称 : --sourcemap， 产 生 sourcemap。 


(12) --no-strict 


禁止 生成 “use strict” 格 式 的 代码 。 


(13) --no-indent 


(14) --environment «values» 


设置 传递 <values> 给 配置 文件 。 


PE: 如 果 使 用 --environment 选项 ， 通 过 process.env 参数 调用 。 


代码 示例 如 下 : 
// using the example above 
process.env.INCLUDE DEPS === 'true' // always a string 
process.env.BUILD === 'production' 


(15) --no-conflict 


生成 UMD 全 局 noConflict 方法 。 
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(16) --intro 


在 bundle 文件 最 前 面 插入 内 容 。 


(17) --outro 


在 bundle 文件 最 后 面 插入 内 容 。 


(18) --banner 


在 bundle 文件 最 前 面 插 入 内 容 。 


(19) --footer 


1E bundle 文件 最 后 面 插入 内 容 。 


26.5 “插件 


Rollup 也 支持 使 用 插件 ， 写 到 配置 对 象 的 plugin FP BD RI. 3x H 


代码 示例 如 下 : 


import babel from 'rollup-plugin-babel'; 
export default { 

entry: 'src/main.js', 

format: 'cjs', 

plugins: [ babel() ], 

dest: 'rel/bundle.js' 


有 以 rollup-plugin-babel 为 例 ， 


与 Webpack 不 同 的 是 ，babel 的 预 设 不 像 Webpack 那样 可 以 直接 写 在 配置 文件 中 ， 而 是 独 


立 写 个 “src/.babelrce”( 注 意 ， 我 们 可 以 写 在 sre 下 ， 而 不 是 非得 放 在 项 目 根 目录 1 


{ 
"presets": ["es2015-rollup"] 


7| 


): 


iE: 在 使 用 babel 插件 前 ， 首 先 确保 安装 了 rollup-plugin-babel 和 babel 预 设 babel-preset- 


es2015-rollup: 


$ npm i rollup-plugin-babel babel-preset-es2015-rollup 


这 时 候 就 能 配合 babel 把 ES 6 模块 编译 成 ES 5 的 bundle 了 。 
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其 他 常见 插件 列表 如 下 : 


O 
O 
O 


O O O O O O O O O O O O O O O O Oo 


alias 一 一 定义 打包 时 所 用 的 别名 。 


ascii 一 一 在 字符 串 中 重 写 非 ASCII 


Py y 


FAT o 


auto-transform 一 一 根据 packagejson 中 的 键 来 应 用 Browserify 自动 转换 ， 就 像 


Browserify 做 的 一 样 。 


M 


babel 


bower-resolve 一 一 在 Rollup 中 使 用 Bower 解决 算法 。 


browserify-transform 一 一 将 Bowserify 


] Babel 翻译 代码 。 


作为 插件 使 用 进行 转换 。 


buble 一 一 用 Bublé (45 Babel 相似 ， 但 是 比 其 快 得 多 ) 翻译 代码 。 


coffee-script 一 一 将 coffeeScript 代码 转换 为 JavaScript 代码 。 


commonjs 一 一 将 CommonJS 模块 转换 为 ES 6 形式 。 


eslint —— 核实 入 口 以 及 引入 的 脚本 代码 。 


filesize 一 一 在 命令 行 中 显示 打包 的 文件 大 小 。 


hypothetical —— 从 假想 的 文件 系统 中 引入 模块 。 


image 一 一 引入 JPG、PNG、GIF 以 及 SVG 图 片 。 
includepaths 提供 引入 模块 的 基础 路 径 。 


inject 一 一 检测 依赖 并 且 注入 之 。 


istanbul —— 使 用 Istanbul 来 处 型 


json 一 一 将 JSON 转换 为 ES 6. 


jst 一 一 编译 模板 文件 。 


jsx 编译 React 的 JSX， 以 及 


TIME E o 


memory 一 一 从 内 存 ， 


读 取 入 口 文 件 。 


其 他 类 似 ISK 的 组 件 。 
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O multientry 一 一 允许 有 多 个 入 口 文件 ， 而 不 是 仅 有 一 个 。 


O node-builtins 一 一 允许 在 Rollup 中 使 用 Node.js 内 置 的 包 。 


O node-resolve 一 一 使 用 Node.js 模块 解决 方案 (比如 ， 使 用 以 npm 方式 安装 的 来 自 
node modules 的 模块 )。 


O pegjs 一 一 引入 PEGjs 语法 作为 语法 解析 。 

O postcss 一 一 编译 PostCSS 并 且 插 入 head 中 。 

O ractive 预 编 译 Ractive 组 件 。 

O replace 一 一 蔡 换 一 组 字符 串 的 出 现 。 

O riot 编译 Riot.js 标签 文件 。 

O string —— 将 文本 文件 以 string 形式 引入 。 

O strip — 移 除 调试 时 使 用 的 陈述 及 函数 ， 比 如 console.log。 
O stylus-css-modules 一 一 编译 Stylus 并 且 注 入 CSS 模块 。 
O typescript 一 一 将 TypeScript 编译 为 JavaScript。 

O uglify 一 一 减 小 生成 的 bundle 的 体积 。 

O vinyl 一 一 从 Vinyl 文件 中 进行 引入 。 

O vue 一 一 编译 Vue 组 件 。 


26.6 ”常见 问题 解析 


O 我 们 可 以 使 用 没有 ES 6 的 依赖 吗 ? 


可 以 ，Rollup 在 CommonJS 模块 下 Tree-shaking 是 不 能 工作 的 ， 但 是 我 们 可 以 通过 插件 将 
它们 转换 成 ES 6 模块 。 
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Browserify 


27.1 ”安装 


全 局 安装 ， 执 行 如 下 命名 : 
$ npm i -g browserify 
除了 全 局 安装 , 我 们 也 可 以 将 Browserity 作为 项 目 依 赖 在 项 目 中 进行 安装 , 执行 如 下 命令 : 


$ npm i browserify --save-dev 


27.2 ”基本 使 用 


与 Node.js 支持 的 CommonJS 规范 一 样 ，Browserify 通过 require 来 加 载 依赖 文件 。 假 设 有 
如 下 目录 结构 : 


example 


|- concat.js 
| -- Log.s 
|- index.js 


|- index.html 
各 个 文件 内 容 如 下 : 
// 入 口 文件 ， 加 载 相应 的 依赖 文件 


var log = require('./1log.js'); 


var concat = require('./concat.js'); 
var arr = ['Just', 'A', 'Browserify', 'Demo', '!']; 


log(concat (arr)); 
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// log.js 
module.exports = function (strToLog) 


console.log(strToLog); 


// concat.js 
module.exports = function (arr) { 


return arr.join(' '); 


<!-- AH HTML 文件 --» 


<!DOCTYPE html» 
«html lang-"en"» 
«head» 


«meta charset-"UTF-8"» 


{ 


«title»browserify build demo</title> 


«/head» 
«body» 
<!-- 引入 打包 后 的 Js 文件 --> 
<script src="bundle.js"></script> 
</body> 
</html> 


在 exmpale 目录 下 执行 以 下 命令 进行 打包 : 


$ browserify index.js > bundle.js 


接 下 来 我 们 在 浏览 器 中 打开 index.html 文件 ， 可 以 看 到 控制 台 输 出 如 下 : 


Just A Browserify Demo ! 


27.8 ”转换 模块 


出 到 最 终 文件 中 。 


27.3.1 安装 转换 模块 


有 时 候 直 接 require 源 文件 并 不 能 达到 我 们 的 目的 ， 我 们 需要 对 文件 进行 预 处 理 后 再 输出 。 
这 时 可 以 利用 Browserify 提供 的 转换 模块 机 制 ， 转 换 模块 可 以 对 源 文件 进行 相应 的 处 理 后 


t 


Fi 


sn) 


转换 模块 即 遵循 一 定 规则 的 npm 模块 ， 所 以 我 们 直接 通过 npm 来 安装 。 这 里 以 envify 4% 
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换 模块 为 例 : 
(1) 全 局 安装 


$ npm install -g envify 
(2) 本 地 安装 


$ npm install envify -save-dev 


27.3.2 使 用 转换 模块 


1. 配置 方式 


在 package.json 文件 的 Browserify 字段 指定 转换 模块 ，Browserify 编译 时 会 自动 依次 调用 
transform 数组 内 指定 的 转换 模块 : 


"browserify": { "transform": [ "envify" ] } 
2， 参 数 方 式 


除了 在 package.json 中 指定 转换 模块 外 ， 还 可 以 在 命令 行 中 进行 指定 : 
$ browserify entry.js -t envify> bundle.js 

我 们 也 可 以 向 转换 模块 传 入 参数 ， 以 下 命令 向 envify 转换 模块 传 入 NODE ENV 参数 ， 值 
为 development: 


$ browserify index.js -t [ envify --NODE ENV development ] > bundle.js 


27.3.8 ”相关 转换 模块 介绍 


Browserify 生态 中 提供 了 很 多 转换 模块 供 我 们 实现 各 类 需求 。 本 节 介 绍 和 Vuejs 开发 相关 
的 转换 模块 。 


1. vueify 
vueify 可 以 让 我 们 将 组 件 的 模板 、 样 式 、JS 逻辑 写 在 同一 个 文件 中 。 
(1) 安装 


$ npm install vueify --save-dev 


如 果 使 用 npm 3 及 以 上 版 本 ， 需 要 手动 安装 babel 依赖 : 


$ npm installbabel-core babel-preset-es2015 babel-runtime babel-plugin-transform-runtime 


--save-dev 
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// app.vue 
«style» 
sped { 
color: #f00; 
} 
</style> 


<template> 
<h1 class="red">{{msg}}</h1> 


</template> 


<script> 
export default { 
data () { 
return { 


msg: 'Hello world!' 


} 


</script> 


也 可 以 使 用 lang 来 指定 预 处 理 器 ， 代 码 示 例如 下 : 


T 


// app.vue 

<style lang="stylus"> 
fed 
color #£00 

«/style» 


«template lang="jade"> 
hl(class-"red") {{msg}} 
«/template» 


<script lang="coffee"> 
module.exports = 
datas => 
msg: 'Hello world!' 


</script> 


使 用 该 转换 模块 允许 我 们 通过 以 下 形式 来 写 Vue 组 人 


F， 代 码 示例 如 下 : 
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还 可 以 使 用 sre 引入 外 部 文件 ， 代 码 示例 如 下 : 


<style lang="stylus" src="style.styl"></style> 


// main.js, AH JS 文件 
var Vue = require('vue') 


var App = require('./app.vue') 


new Vue ({ 
el: 'body', 
components: { 
app: App 
} 
} 


<!-- ATH HTML 文件 --> 


«body» 
<app></app> 
<script src="build.js"></script> 


</body> 


(2) 编译 


$ browserify -t vueify -e src/main.js -o build/build.js 

2. envify 

envify FERIR OR HRS PIA node 环境 变量 代码 片段 。 这 样 我 们 就 可 以 只 在 开发 
环境 中 输出 调试 信息 ， 在 生产 环境 中 由 于 条 件 判断 为 false， 调 试 信息 不 会 输出 。 还 可 以 结合 
uglifyify 库 在 生产 环境 中 将 调试 信息 直接 移 除 。 


(1) 安装 
$ npm install envify browserify 


(2) 代码 示例 


// index.js 
if (process.env.NODE ENV --- "development") ( 


console.log('development only') 
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假设 当前 NODE_ENYV 环境 变量 值 为 production， 运 行 转换 模块 后 将 会 得 到 : 


// bundle.js 


if ("production" === "development") { 


console.log('development only') 


(3) 编译 


通过 Browserify 命令 行使 用 envify 转换 模块 : 
$ browserify index.js -t envify > bundle.js 
还 可 以 在 编译 时 传 入 自 定义 环境 变量 : 


$ browserify index.js -t [ envify --NODE ENV development ] > bundle.js 


ml 


$ browserify index.js -t [ envify --NODE ENV production ] » bundle.js 
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FE 用 。 


vue-loader 是 基于 Webpack 的 loader， 在 Vue 组 件 化 中 起 着 决定 性 


28.31 ”如 何 配置 


vue-loader 的 配置 和 Webpack 其 他 loader 的 配置 类 似 ， 对 .vue 后 级 增加 处 理 。 


配置 如 下 : 


module.exports = { 


entry: { 
app: './src/main.js' 
), 
module: { 
loaders: [ 
{ 
test: /N.vue$/, 


loader: 'vue' 


其 实 配置 还 是 非常 简单 、 直 观 的 。 


我 们 来 看 .vue 文件 的 组 成 。 其 一 般 包含 : 


O template 标签 一 一 包 囊 HTML 模板 片段 。 
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O script 标签 一 一 配置 Vue 和 载 入 其 他 组 件 或 者 依赖 库 。 


Q style 标签 一 一 设置 样式 


代码 示例 如 下 : 


<template> 


<div id="app"> 
<p> Welcome to DDFE,We love Vue.js! </p> 
</div> 


</template> 


<script> 
export default { 
} 


«/script» 


«style» 
html { 
height: 100$; 
} 
</style> 


28.3 ”特性 介绍 


1. template 

O 支持 lang 配置 多 种 模板 语法 。 
O 只 支持 单个 template 标签 。 

2. style 


O 支持 lang 配置 多 种 预 编 译 语法 。 


O 支持 scope 属性 ， 这 样 CSS 只 应 用 到 当前 组 件 的 元 素 中 ， 


不 需要 任何 插件 来 支持 。 


O 一 个 .vue 文件 中 可 以 包含 多 个 style 标签 。 


类 似 于 Shadow DOM， 但 是 
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O 


内 置 PostCSS 和 autoprefixer 2f E12] 48 UU Va. se HAR o 


script 


默认 支持 Babel (使 用 babel-loader) 来 编译 ES 6 语法 糖 。 


对 于 7.0 及 以 上 版 本 ， 使 用 Babel 6; 如 果 使 用 Babel 5， 则 需要 使 用 6.x 版 本 。 


支持 通过 import 方式 载 入 其 他 .vue 后 级 的 组 件 文件 。 


Q OO OQ. QU 


只 文 持 单个 script 标签 。 
4. Hot Reload 
vue 文件 修改 后 ， 默 认 文 持 对 应 的 页 面 自动 刷新 。 


默认 内 置 loader 的 配置 如 下 : 


var defaultLoaders = 


html: 'vue-html-loader', 


css: 'vue-style-loader!css-loader', 


js: 'babel-loader?presets[]-es2015&plugins[]-transform-runtime&comments-false' 


我 们 可 以 看 到 : 


O JS 默认 使 用 babel-loader 编译 ， 加 了 一 些 参数 。 


O HTML 默认 使 用 vue-html-loader。 


O CSS 默认 使 用 vue-style-loader 和 css-loader。 


28.4 常见 问题 解析 


1， 如 何 自 定义 autoprefixer 


<!-- webpack.config.js --> 
module.exports = { 

PIA we 

vue: { 


autoprefixer: false 
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2， 如 何 自 定 义 PostCSS 
<!-- webpack.config.js --> 
module.exports = { 

//. 
vue: { 

postcss: { 

//. 

}, 


3. 如 何 自 定义 style 的 预 编 译 语 言 


<!-- 第 一 步 使 用 lang 配置 --> 


<style lang="sass"> 


</style> 


«r-- 第 二 步 安装 依赖 --> 


npm install sass-loader node-sass 


4. 如 何 自 定义 loaders 


module.exports = { 
module: { 
loaders: [ 
{ 
test: /N.vue$/, 


loader: 'vue 


vue: { 


loaders: {} 


28.5 源码 解析 


我 们 先 来 看 一 下 vue-loader 文件 结构 ， 如 区 


28-1 所 示 。 
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loader.js parser.js selector.js | | style-rewriter.js template-loader.js template-rewrite.js 


图 28-1 ”vue-loader 文 件 结 构 


O 主 入 口 文件 : loader.js。 接受 .vue 文件 的 全 部 内 容 , 然后 把 内 容 content. 文件 名 fileName 
传递 下 去 。 


O 内 容 解析 文件 : parserjs。 首 先 通过 调用 hash 函数 把 文件 名 和 文件 内 容 生成 唯一 的 key 
然后 通过 cache 检测 ， 如 果 命 中 cache， 就 直接 返回 ， 如 果 没 有 命中 ， 则 调用 parses 的 
parseFragment 方法 对 文件 内 容 进行 解析 ， 人 遍历 子 节 点 内 容 ( 只 处 理 template. style 和 
script 节点 )， 取 出 对 应 的 特性 属性 Cang, sre 和 scoped)， 针 对 空 节点 的 script 和 style 
也 进行 了 优化 。parser.js 解析 过 程 如 图 18-2 所 示 。 


我 们 来 看 一 个 最 简单 的 .vue 文件 


o 


«template» 
<div id="app"> 
<p> 
Welcome to DDFE,We love Vue.js! 
</p> 
</div> 


</template> 


«script» 
export default { 
} 


</script> 


<style> 
html { 
height: 100%; 
} 
</style> 
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D content TD content 
fileName fileName 


cacheKey 


fragment.childNodes.forEach 


template 


图 28-2 ”parser.js 解 析 过 程 


通过 parse5.parseFragment 解析 后 : 


{ nodeName: '#document-fragment', 
quirksMode: false, 
childNodes: 


[ { nodeName: 'template', 
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tagName: 'template', 

attrs: i[], 

namespaceURI: 'http://www.w3.org/1999/xhtml', 
childNodes: [], 

parentNode: [Circular], 

content: [Object], 

. location: [Object] }, 


nodeName: '#text', 
value: '\n\n', 
parentNode: [Circular], 


. location: [Object] }, 


nodeName: 'script', 

tagName: 'script', 

tt ds 

namespaceURI: 'http://www.w3.org/1999/xhtml', 
childNodes: [Object], 

parentNode: [Circular], 


. location: [Object] }, 


nodeName: '#text', 
value: '\n\n', 
parentNode: [Circular], 


. location: [Object] }, 


nodeName: 'style', 

tagName: 'style', 

atUrsi-D 

namespaceURI: 'http://www.w3.org/1999/xhtml', 
childNodes: [Object], 

parentNode: [Circular], 


. location: [Object] }, 


nodeName: '#text', 
value: '\n', 
parentNode: [Circular], 


. location: [Object] } 


实现 template 支持 其 他 模板 引擎 ， 比 如 jade: 


«template lang="jade"> 
#app 
P 
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| Welcome to DDFE,We love Vue.js! 


«/template» 
template-loader.js 解析 过 程 如 下 : 
接受 模板 template 的 内 容 , 然后 前 面 传递 了 { raw: true, engine: ‘jade’ } 的 query 参数 对 象 ， 如 
果 engine 没有 设置 ， 则 直接 用 文件 的 后 级 比如 这 里 是 App.vue， 取 后 级 就 是 vue)。 模 板 的 解 
析 还 是 依赖 consolidate 这 个 核心 包 来 判断 是 否 文 持 这 类 模板 和 后 续 的 render. 


这 里 面 会 检查 是 否 安装 了 对 应 的 依赖 包 ， 比 如 依赖 jade， 如 果 没 有 安装 consolidate.js 会 在 
后 台 抛 错 ， 如 图 28-3 所 示 。 


图 28-3 consolidate.js 寻 找 依赖 jade 抛 错 


style-rewriter.js 解析 过 程 如 下 : 


接受 模板 style 的 内 容 ， 然 后 前 面 传递 了 { id: | v-11f8ff75', scoped: true } 的 query 参数 对 象 ， 
里 面 会 判断 autoprefixer 的 配置 , 调用 object-assign 把 它 的 配置 和 用 户 在 Webpack 中 配置 options 
的 autoprefixer 合并 ， 最 终 还 是 依赖 PostCSS 来 处 理 。 


<!-- autoprefixer --> 
var options = this.options.vue || {} 
var autoprefixOptions = options.autoprefixer 


// 默认 自动 加 载 ， 触 发 手动 在 配置 文件 中 配置 vue 对象 中 的 autoprefixer 


if (autoprefixOptions !== false) { 
autoprefixOptions = assign ( 
{}, 
// also respect autoprefixer-loader options 
this.options.autoprefixer, 
autoprefixOptions 


) 


var autoprefixer = require('autoprefixer') (autoprefixOptions) 


plugins.push (autoprefixer) 


我 们 重点 看 一 下 配置 scoped 的 处 理 实现 。 
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<!-- App.vue --> 
<template> 
<div id="app"> 
<p>Welcome to DDFE,We love Vue.js! 
</div> 
</template> 
<style scoped> 
*app { 
text-align: center; 
} 


</style> 
编译 后 : 


<div id="app"  v-11f8ff75» 


</p> 


<p v-11f8ff75»Welcome to DDFE,We love Vue.js!</p> 


</div> 
#app[_v-11f£8f£75] { 


text-align: center; 


源码 如 下 : 


«!-- loader.js 中 提 到 了 ia 的 生成 规则 --> 


var hash = require('hash-sum') 


var filePath = this.resourcePath 


var moduleId = ' v-' + hash(filePath) 


<!-- style-rewriter.js --> 


var addId = postcss.plugin('add-id', function 


return function (root) { 


root.each(function rewriteSelector (node) 


if (!node.selector) { 
// handle media queries 
if (node.type === 'atrule' 
node.each (rewriteSelector) 
} 


return 


&& node.name 


(opts) { 
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node.selector = selectorParser(function (selectors) { 


selectors.each(function (selector) { 
var node - null 
selector.each (function (n) { 
if (n.type !-- 'pseudo') node =n 
} 
selector.insertAfter(node, selectorParser.attribute ({ 
attribute: 
})) 
} 


}) .process (node.selector).result 


opts.id 


if (query.scoped) { 


plugins.push(addId({ id: query.id })) 


28.6 


Q 


Q 


O O O O 


上 面 我 们 已 经 同 


工具 包 介 绍 


i 续 提 到 了 一 些 vue-loader 中 使 用 的 不 错 的 第 三 方 工 


Lf. 


T 


PostCSS， 主 要 用 来 处 理 .vue 文件 


autoprefixer， 其 实 它 就 是 PostCSS 最 流行 的 插件 ， 


CSS 规则 添加 浏览 器 前 绥 。 


style 部 分 的 一 些 特性 


postcss-selector-parser， 提 供 一 些 API 来 解析 选择 器 。 


生成 sourcemap 的 工具 包 。 


source-map, 


vue-template-validator, 4hF? Vue.js 模板 template 在 编译 器 中 的 一 些 错误 。 


consolidate， 模 板 引 擎 合集 ， 支 持 市 面 


af: 
"do 


parse5, HTML 语法 解析 工具 。 


F 基 本 所 有 的 模板 引擎 ， 比 如 jade. 


ERENT, EEUN scoped 等 。 


使 用 caniuse 站 点 的 数据 自动 给 一 些 


doT.js、ejs 
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objectrassign， 来 自 大 名 易 易 的 sindresorhus 作品 ， 一 个 ES 5 Object.assign()ITJ polyfill, 
MEDE MIRED. 


lru-cache， 支 持 least-recently-used 算法 的 cache 工具 包 。 


hash-sum， 非 常 快 速 的 唯一 hash 值 生 成 器 。 


de-indent， 从 代码 块 中 删除 多 余 的 indent。 


loader-utils, Webpack loader 的 依赖 库 ， 提 供 很 多 常用 的 方法 ， 比 如 parseQuery 等 。 
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PostCSS 是 一 个 用 JavaScript 插件 来 转换 CSS 的 工具 ， 目 前 已 经 有 200 名 插件 ， 这 些 插件 
可 以 lint CSS， 支 持 变 量 、mixins、 内 联 的 图 片 等 。 


简单 来 说 ，PostCSS 可 以 将 CSS 转换 为 JavaScript 能 够 处 理 的 数据 格式 ， 基 于 JavaScript 所 
写 的 插件 可 以 完成 上 述 各 种 操作 。PostCSS 为 这 些 插 件 提供 了 接口 ， 方 便 其 完成 各 自 的 功能 ， 
晶 是 不 会 对 CSS 代码 做 任何 修改 。 从 理论 上 讲 ，PostCSS 的 插件 可 以 对 CSS 进行 任何 操作 ， 只 
要 我 们 有 和 需求， 就 可 以 写 一 个 JavaScript 插件 来 实现 。 


291 ”安装 


PostCSS 针对 不 同 的 构建 工具 提供 了 不 同 的 安装 工具 。 在 Webpack 中 该 工具 名 为 
postcss-loader， 全 局 安装 方式 如 下 : 


$ npm install -9 postcss-loader 


除 此 之 外 ， 当 需要 用 到 PostCSS 的 插件 时 ， 也 可 以 使 用 npm 安装 。 比 如 ， 大 名 易 易 的 
autoprefixer 安装 方式 如 下 : 


$ npm install autoprefixer 


2902 ”配置 


PostCSS 一 般 与 Gulp. Webpack 等 构建 工具 搭配 使 用 。 在 vue-loader 中 使 用 PostCSS HY, 
需要 在 webpack.config.js 中 进行 配置 。 当 需要 使 用 PostCSS 的 插件 时 ， 在 vue 选项 中 向 postcss 
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设置 选项 传 入 一 个 数组 ， 比 如 使 用 CSSNext 插件 的 配置 代码 示例 如 下 : 


// webpack.config.js 


module.exports = { 
// other configs... 
vue: { 
// use custom postcss plugins 
postcss: [require('postcss-cssnext') ()], 
// disable vue-loader autoprefixing. 
// this is a good idea since cssnext comes with it too. 


autoprefixer: false 


除了 提供 一 个 数组 用 于 存放 引用 的 数组 外 ，postcss 设置 选项 还 可 以 接受 : 
O 一 个 可 以 返回 插件 数组 的 函数 。 代 码 示 例如 下 : 


postcss: function () { 


return [precss, autoprefixer]; 


O 一 个 对 象 ， 该 对 象 包含 将 被 传 给 PostCSS 处 理 器 的 设置 选项 。 代 码 示例 如 下 : 


postcss: { 
plugins: [...], // list of plugins 
options: { 


parser: sugarss // use sugarss parser 


293 S 


PE 


在 命令 行 或 者 npm scripts 中 使 用 PostCSS 需要 额外 安装 postcss-cli， 其 安装 方式 如 下 : 


$ npm install postcss-cli 
语法 如 下 : 


postcss [options] [-o output-file|-d output-directory|-r] [input-file] 
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A RRAS E 


命令 选项 如 下 : 


(1) --output|-o 


指定 输出 文件 。 如 果 没 有 指定 输出 文件 ， 则 


将 无 法 正确 工作 。 


(2) --dir|-d 


指定 多 个 输出 文件 


被 指定 。 在 提供 了 多 个 输入 文件 的 情况 下 需要 使 


(3) --replace|-r 


用 生成 的 输出 文件 蔡 换 单个 或 者 多 个 输入 文件 


但 不 是 三 
(4) --use|-u 
指定 要 使 用 的 插件 。 
一 个 插件 。 


sourcemap, 使 


(5) --map|-m 


激活 生成 sourcemap 。 默 
]--mapfile 或 者 --no-map.inline 


还 可 以 使 用 更 多 的 sourcemap 选项 ， 例 如 : 

Q --no-map 一 一 不 要 生成 sourcemap， 即 使 之 前 已 有 map FE. 
O --map.annotation <path> 指定 可 选 的 

O --no-map.annotation —— 禁止 添加 CSS 的 注解 。 

O --no-map.sourcesContent 一 一 M map 中 移 除 原始 的 CSS. 


(6) --local-plugins 


从 当前 工作 


qm 
有 指定 ，PostCSS 将 会 


i 件 将 无 法 正 
相似 的 ， 如 果 输 入 文件 没 : 


可 以 指定 多 个 插件 ,使 


录 的 node modules 文件 夹 


认 设 置 是 生成 行内 映射 。 如 果 要 在 其 


A 
命令 。 


Sa 


PostCSS 会 


从 stdin 读 入 ， 对 输入 文件 位 置 有 依赖 的 插 


写 入 到 stdout， 但 是 对 输出 文件 位 


I] 位置。 需要 指定 --output、--dir 或 者 --replace 选项 ， 但 不 是 三 者 都 需要 


用 --dir 或 者 --replace。 


台 寻 找 插 件 。 如 果 没 


Fo 需要 指定 --output、--dir 或 者 --replace 选项 ， 
者 都 需要 被 指定 。 在 提供 了 多 个 输入 文件 的 情况 下 需要 使 用 --dir 或 者 --replace。 


]--use 选项 或 者 在 config 文件 中 至 少 需 要 指定 


他 的 .map 文件 中 生成 


于 附加 在 CSS 后 面 的 sourcemap 注解 的 路 径 。 


有 这 个 选项 ，postcss-cli 将 
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会 从 其 安装 位 置 的 node. modules 文件 夹 开始 寻找 插件 一 一 确切 地 说 ， 在 postess-cli 是 全 


的 情况 下 ， 它 将 会 寻找 全 局 安装 的 插件 。 


C7) --watch|-w 


[E 


监视 文件 系统 的 改变 并 且 当 源 文件 更 改 时 重新 编译 。 


xr 
Eos 


当 行 内 CSS 被 引入 时 ， 将 向 JavaScript 配置 文件 中 添加 一 个 更 新 处 理 器 ， 来 保证 引 


块 被 纳入 考量 。 代 码 示例 如 下 : 


{ 


"postcss-import": { 


onlImport: function(sources) { 
global.watchCSS(sources, this.from); 


} 


对 postess-import 来 说 ， 该 处 理 器 会 被 自动 添加 。 


(8) --config|-c 


指定 内 容 为 插件 配置 的 JSON 文件 ， 插 件 的 名 称 作 为 键 。 代 码 示例 如 下 : 


"autoprefixer": { 
"browsers": "> 5%" 

Is 

"postcss-cachify": { 


"paseUrl": "/res" 


如 果 函 数 允 许 作为 插件 的 参数 ， 那 么 JavaScript 配置 也 可 以 使 


module.exports = { 


"postcss-url": { 


url: function(url) { return "http://example.com/" + url; 


bs 
autoprefixer: { 


browsers: "» 5$" 


} 


]。 代 码 示例 如 下 : 


的 模 
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可 选 的 配置 选项 可 以 作为 --plugin.option f 


In 


£ 
TER 


命 


" 


use": ["autoprefixer" 


"input": "soreen.css", 
"output": "bundle.css" 
"local-plugins": true, 


{ 


"> 59" 


"autoprefixer": 
"browsers": 

Is 

"postcss-cachify": { 


"paseUrl": "/res" 


(9) --syntax|-s 


JER. 


令 行 选项 也 可 以 在 配置 文件 中 进行 指定 。 代 码 示例 如 下 : 


"postcss-cachify"], 


, 


, 


将 可 选 的 模块 作为 定 


(10) --parser|-p 


BIB] PostCSS 语法 使 用 。 


将 可 选 的 模块 作为 定 4 


(11) -stringifier|-t 


MIR] PostCSS 输入 解析 器 使 用 。 


将 可 选 的 模块 作为 定 4 


(12) --help|-h 
显示 帮助 信息 。 


29.4 ”插件 


Q autoprefixer, PostC 


d 


Ff 


O essnext, i 


cssnext 负责 把 这 些 新 特性 转译 成 在 当前 浏览 器 ! 
包含 了 autoprefixer 的 功能 ， 所 以 当 使 


WIR] PostCSS 输出 转换 器 使 用 。 


SS 最 知名 的 插件 , 其 作用 是 为 CSS 中 的 属性 添加 浏览 器 特定 的 前 级 。 
许 开 发 人 员 在 当前 项 目 中 使 用 CSS 将 来 版 本 中 可 能 会 加 入 的 新 特性 。 


可 以 使 用 的 语法 。 在 这 些 新 特性 中 也 
JT cssnext 后 就 无 须 再 使 用 autoprefixer 了 。 
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precss， 包 含 了 能 够 使 用 类 似 Sass 中 的 变量 、 般 套 、 混 合 等 功能 的 插件 。 


postcss-sorting， 对 CSS 内 容 按照 指定 规则 排序 。 


short， 添 加 并 且 扩展 很 多 的 简写 属性 。 


postcss-use， 在 当前 样式 表 中 直接 使 用 PostCSS 的 插件 。 


postcss-assets， 插 入 图 像 尺 寸 以 及 内 联 文件 。 


postcss-sprites， 生 成 图 像 雪 得 图 。 


font-magician， 生 成 所 有 CSS 中 需要 的 @font-face 规则 。 


postcss-inline-svg， 内 联 SVG 图 片 并 且 定 制 其 样式 。 


postcss-write-svg， 直 接 在 CSS 中 书写 简单 的 SVG. 


stylelint， 模 块 化 的 CSS 样式 检查 器 。 


stylefmt， 根 据 stylelint 自动 格式 化 CSS 的 工具 。 


doiuse， 根 据 Can IUse 的 数据 来 检测 CSS 的 浏览 器 支持 度 。 


O O O O O O O O O O ỌO QO Oo 


colorguard， 帮 助 开 发 者 维护 一 个 统一 的 调 色 板 。 


PORE irs 


30.1 Composition Event 


Composition Event， 中 文 译 为 “复合 事件 ” AE DOM 3 级 事件 中 新 添加 的 一 类 事件 类 型 ， 
用 于 处 理 IME 的 输入 序列 。IME (Input Method Editor， 输 入 法 编辑 器 ) 可 以 让 用 Boots 
键盘 上 找 不 到 的 字符 。 复 合 事件 就 是 针对 检测 和 处 理 这 种 输入 而 设计 的 。 因 为 以 上 所 述 原因 ， 
复合 事件 很 少 被 拉丁 系 语言 输入 的 开发 者 所 知 〈 因 为 拉丁 字母 都 能 通过 物理 键盘 输入 )。 当 然 ， 
即使 是 使 用 非 拉 丁 系 语言 比如 中 文 作为 输入 的 开发 者 ， 也 不 见得 了 解 复合 事件 ， 因 为 在 开发 ， 
用 到 该 种 事件 类 型 的 情况 比较 少见 。 

IME 复合 系统 的 工作 原理 是 : 缓存 用 户 的 键盘 输入 ， 直 到 一 个 字符 被 选中 后 才 确 定 输入 。 
缓存 的 键盘 输入 会 暂时 展示 在 输入 框 中 ， 但 不 会 真正 被 搬入 到 DOM 中 ， 如 图 30-1 所 示 。 但 是 
如 果 在 复合 事件 的 过 程 中 改变 了 输入 框 的 值 (比如 切换 了 输入 法 或 者 直接 按 下 Enter 键 )， 复 合 
事件 将 提前 结束 ， 同 时 缓存 的 键盘 输入 值 将 会 插入 到 输入 框 中 。 

dici | 
didi 
图 30-1 ”缓存 键盘 输入 

复合 事件 类 型 包含 以 下 几 种 事件 : 

O compositionstart 一 一 FE IME 的 文本 复合 系统 打开 时 触发 。 

O compositionend 一 一 在 IME 的 文本 复合 系统 关闭 即 用 户 选 中 了 字符 并 确定 输入 时 触 

发 ， 表 示 返 回 正常 键盘 的 输入 状态 。 
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dg 


O compositionupdate 一 一 在 compositionstart 事件 触发 后 、compositionend 事件 触发 前 这 
段 时 间 内 ， 每 次 向 输入 字段 中 进行 输入 时 均 会 触发 。 


注 : input 事件 将 在 复合 事件 后 触发 。 


但 是 ， 实 际 情况 与 理想 还 是 有 一 定 距 离 的 ， 复合 事件 的 兼容 性 比较 一 般 。 如 图 30-2 所 示 是 
MDN 中 列 出 的 兼容 性 表现 ， 详 情 可 参见 https://developer.mozilla.org/en-US/docs/Web/API/ 


CompositionEvent. 


Browser compatibility Browser compatibility 
Desktop Mobile «op Mobile 


Firefox Internet 


Feature Chrome (Gecko) Explorer Opera Safari Feature Android Firefox Mobile „a Opera Safari 


(Gecko) obie Mobile Mobile 


Basic (Yes) 9.0 (9.0) (Yes) Not supported Basic 9.0 (9.0) 
support support 


图 30-2 复合 事件 的 兼容 性 表现 


综 上 所 述 ， 在 使 用 


à 
ui 


事件 处 理 input 相关 问题 时 ， 仍 然 需要 慎重 。 


30.2 ES6 


ECMAScript 6〈 以 下 简称 ES 6) 是 JavaScript 语言 的 最 新 一 代 标 准 ， 发 布 于 2015 年 6 A, 
因为 ECMA 委员 会 决定 从 ES 6 起 每 年 更 新 一 次 标准 ， 因 此 ES 6 被 改名 为 ES 2015， 后 面 的 标 
准将 按照 发 布 年 份 命名 ， 如 ES2016. ES 2017 等 。 


关于 ECMAScript 与 JavaScript 的 关系 ,简单 来 说 ， 前 者 是 后 者 的 规格 ， 后 者 是 前 者 的 一 种 
实现 。 通 俗 点 说 ， 就 是 后 者 是 前 者 的 一 种 方言 。 在 通常 情况 下 ， 二 者 之 间 可 以 划 等 号 。 


ES 6 是 JavaScript 的 一 次 极为 重大 的 更 新 ， 引 入 了 很 多 新 特性 ， 这 些 特性 解决 了 JavaScript 
长 久 以 来 被 开发 者 所 诉 病 的 许多 缺点 。 同 时 ，ES 6 也 给 JavaScript 的 语法 带 来 了 重大 变革 ， 它 
门 使 JavaScript 变 得 更 加 强大 、 更 富有 表现 力 。 尽 管 属 于 重大 升级 ， 但 ES 6 仍然 秉持 了 最 大 化 
次 容 已 有 代码 的 设计 理念 , 因此 采用 ES 5 及 之 前 标准 编写 的 JavaScript 代码 在 ES 6 的 环境 下 将 
继续 正常 运行 。 


a => 


由 于 发 布 日 期 尚 短 ， 当 前 主流 的 浏览 器 对 ES 6 还 没有 全 面 支持 , 不 过 好 消息 是 支持 程度 正 
在 逐渐 提高 ， 目 前 在 各 大 浏览 器 的 最 新 版 本 中 ES 6 的 大 部 分 特性 都 已 经 实现 。 而 Node.js 对 
ES 6 的 支持 性 还 要 优 于 浏览 器 ， 通 过 node 可 以 体验 更 多 ES 6 的 特性 。 我 们 也 可 以 使 用 Babel 
等 JavaScript 预 编译 器 将 ES 6 代码 转换 为 ES 5 代码 ， 从 而 在 现 有 环境 中 执行 
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下 面 将 简单 介绍 Vue.js 源码 


FP 大 


lm 


30.2.1 模块 


JASE, JavaScript 一 直 没 有 模块 
将 变 得 难以 复 用 且 极 难 维护 。 医 


JH ES 6 的 新 特性 


的 概念 ， 这 会 导致 当 项 
此 ， 在 相当 长 一 段 时 让 


一 一 模块 、let 和 const. 


大 到 一 定 程度 时 JavaScript 代码 


基本 从 一 开始 就 被 排除 在 方案 之 外 。 环 顾 
都 确保 了 模块 功能 的 实现 ， 唯 独 JavaScript 
现 。 


~ 


在 ES6 发 布 之 前 ， 开 发 者 社区 就 制定 了 一 些 模块 加 载 的 方案 ， 其 中 使 
CommonJS (node 模块 化 加 载 ) 规范 和 AMD (RequireJS) Js. HIF 


专注 于 浏览 器 环境 。 


^E 
rH 


WS, ES 6 从 官方 标 ; 
要 的 export 和 import 概念 。 


1. 


export 


在 ES 6 中 ， 一 个 文件 就 是 一 个 模块 ， 一 个 模块 内 部 的 所 有 变量 ， 对 了 


{LA 
在 官方 标准 | 


REUTER S EERE 


F 发 语言 


JA, MPAA ALIA KUL, JavaScript 


， 如 Python 的 import, Ruby 的 require 等 
一直 缺 少 对 模块 的 定义 ， 直 到 ES 6 的 


LI 
Bi 


] 最 广泛 的 是 
于 服务 器 环境 ， 后 者 则 


AH 


于 发 规范 。 下 


的 ， 除 非 使 用 关键 词 export 对 外 暴露 接口 ， 暴 露 的 各 接口 通过 名 字 来 进行 区 分 。 


14, lib.js 模块 通过 sqrt. square. diag 向 外 界 暴露 三 个 接口 。 


a ipjo sess 
/* 
暴露 三 个 接口 给 外 界 


export const sqrt = Math.sqrt; 

export function square(x) { 
return x * x; 

} 

export function diag(x, y) { 

return sqrt (Square (X) + square(y)); 


} 


export 也 可 以 采用 下 面 的 方式 暴露 接口 ; 


const sqrt = Math.sqrt; 


看 主要 介绍 ES 6 模块 化 ] 


= 


到 


DET 


重 


外 部 来 说 是 无 法 获取 
如 以 下 示例 代 
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function square(x) { 


return x * x; 


function diag(x, y) ( 


return sqrt(square(x) + square(y)); 


// 通过 export RRR OW PRA, BATES dn E EARS ER 


export {sqrt, square, diag}; 


建议 采用 第 二 种 方式 ， 因 为 其 结构 清晰 ， 模 块 暴露 了 哪些 接口 一 目 了 然 。 


在 通常 情况 下 ,export 暴露 的 接口 就 是 其 本 来 的 名 字 , 不 过 可 以 采用 as 语法 进行 别名 export, 
导出 方式 可 以 将 一 个 接口 通过 个 名 字 对 外 烘 露 。 代 码 示例 如 下 : 


const sqrt = Math.sqrt; 
// 通过 两 个 别名 对 外 界 暴露 
export {sqrt as sql, sqrt as sq2}; 

ik: 在 ES 6 模块 规范 中 ， 如 果 b 模块 从 a 模块 导入 一 个 原始 值 后 ， 在 a 模块 中 修改 了 这 个 
原始 值 ， 那 么 b 模块 中 的 值 也 会 与 a 模块 中 最 新 的 值 保持 同步 ， 即 export 暴露 的 接口 与 其 在 模 
块 内 部 对 应 的 值 是 一 种 动态 绑 定 的 关系 ， 通 过 接口 可 以 获取 模块 内 部 实时 的 值 。 


2. import 


使 用 export 命令 对 外 暴露 接口 以 后 ， 其 他 JavaScript 文件 就 可 以 通过 import 命令 加 载 这 个 模 
块 (文件 )。 在 main.js 模块 中 就 可 以 通过 import 引入 上 一 节 中 lib.js 暴露 的 接口 ， 代 码 示例 如 下 : 


/* 
通过 import 语法 从 lib 模块 中 导入 所 需要 的 接 
注意 大 括号 中 的 接口 名 必须 在 1ib .js 模块 中 
通过 export 关键 词 导 出 
x 


import ( square, diag ) from './lib'; 


console.log(square(11)); // 121 
console.log(diag(4, 3)); // 5 

import 也 可 以 采用 as 语法 对 引入 的 变量 重 命 名 ， 代 码 示例 如 下 : 
du rS libis esee 


export var myVarl - 'varl'; 
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import {myVarl as myCustomVar 


console.log (myCustomVarl); 


import 会 执行 加 载 的 模块 ， 


// 只 加 载 执行 模块 ， 不 引用 任何 接 


import 'lib' 


) from './lib'; 


PLC 


空 import 的 语法 。 代 码 示例 如 下 : 


import 还 可 以 整体 加 载 模块 ， 达 到 命名 空间 的 效果 。 代 码 示例 如 下 : 


export const MY CONST = 


export function myFunc() 


} 


export var myVarl = :-::; 


export let myVar2 = :::; 


export function* myGeneratorFunc() 


} 


export class MyClass { 


import * as lib from './lib'; 


console.log(lib.myVarl) 
console.log(lib.myVar2) 
new lib.MyClass(); 


3. export default 


r 


r 


上 面 使 用 的 export 有 一 个 小 问题 ， 


{ 


即使 用 模块 接口 的 人 必须 要 知道 该 模块 export 了 哪些 接 


口 。 有 时 候 一 个 模块 实际 | 
那么 在 ES6 中 可 以 使 用 export default 语法 让 模块 调用 者 自 定义 要 导入 的 接口 名 字 。 代 码 示 例如 


//[------ myFunc.js ------ 


export default function 


() 


上 只 对 外 暴露 


个 接口 ， 这 时 候 实 际 上 没 必要 再 限定 暴露 的 接口 名 字 ， 
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Ju PRISES mainl.js ------ 

/* 

注意 : myFunc 不 能 包含 在 {} 里; myFunc 可 以 替换 为 任意 喜欢 的 名 字 
*/ 


import myFunc from 'myFunc'; 


myFunc(); 


本 质 上 ，export default 就 是 输出 一 个 名 为 default 的 变量 或 方法 ， 然 后 系统 允许 我 们 进行 对 
命名 。 代 码 示例 如 下 : 


// lib.js 


mm 


function add(x, y) ( 
return x * y; 

} 

export {add as default}; 


i 


// 等 同 于 
// export default add; 


// main.js 


import ( default as myAdd } from 'lib'; 


T 


// 等 同 于 


// import myAdd from 'lib'; 


使 用 export default 命令 ， 我 们 可 以 很 直观 地 引入 模块 ， 比 如 引用 jquery 模块 时 可 以 这 
样 写 : 


import $ from 'jquery'; 


4. export/import 在 Vue.js 中 的 使 用 


Vue.js 采用 export/import 进行 模块 化 开发 ， 文 件 通 过 export 暴露 接口 ， 通 过 import 引用 其 
他 文件 的 内 容 。Vuejjs 的 源码 结构 优雅 、 层 级 严谨 ， 而 这 一 切 都 离 不 开 export 和 import. 


举例 来 说 ，Vue.js 的 入 口 文件 是 /src/index.js， 该 文件 开头 如 下 : 


T 


import Vue from './instance/vue' 

import installGlobalAPI from './global-api' 

import { inBrowser, devtools } from './util/index' 
import config from './config' 
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indexjs 从 其 他 4 个 文件 引用 了 必要 的 变量 和 方法 。 进 入 其 引用 的 第 一 个 文件 /src/ 
instance/vue.js 中 ， 我 们 可 以 看 至 


， 其 采用 了 export default MS: 


export default Vue 


也 有 不 采用 export default 方式 暴露 接口 的 ， 比 如 在 /src/filters/array-filters.js 中 采用 以 下 语法 
对 外 暴露 了 三 个 函数 方法 : 


export function limitBy(..) {}, 


export function limitBy(..) {}, 
export function limitBy(...) {} 


在 src/filters/index.js 中 引入 上 述 三 个 函数 : 


import { orderBy, filterBy, limitBy } from './array-filters' 


30.2.2 let 


代码 中 任何 一 对 花 括 号 CAD 中 的 语句 集 都 属于 一 个 块 ， 其 中 定义 的 所 有 变量 在 代码 块 
外 都 是 不 可 见 的 ,我们 称 之 为 块 级 作用 域 。 在 ES 5 及 之 前 的 版 本 中 均 不 存在 块 级 作用 域 , 只 有 
全 局 作用 域 和 函数 作用 域 。 由 此 带 来 的 问题 很 多 ， 比 如 内 层 变量 可 能 覆盖 外 层 变 量 、 用 于 计数 
的 循环 变量 泄露 为 全 局 变量 等 。 以 往 ， 开 发 者 往往 要 通过 闭 包 等 方式 来 模拟 块 级 作用 域 ， 尤 为 
Jj. let 关键 词 的 出 现 为 JavaScript 带 来 了 期 盼 已 久 的 块 级 作用 域 。 


1. let 的 使 用 


let 的 作用 是 声明 变量 ， 用 法 类 似 于 var。 与 var 所 不 同 的 是 ，let 声明 的 变量 只 在 let 命令 所 
在 的 代码 块 内 有 效 。 代 码 示 例如 下 : 


+ 


x 


let a = 'ddfe'; 


var b = 'didiFamily'; 


a; // ReferenceError: a is not defined 
b; // 'didiFamily' 

在 用 let 声明 的 a 的 代码 块 之 外 调用 a 会 报错 ， 而 用 var 声明 的 b 则 可 以 返回 正确 值 。 这 表 
BA let 声明 的 变量 只 在 其 所 在 代码 块 内 有 效 。 


let 很 适合 用 来 声明 循环 变量 ， 代 码 示例 如 下 : 


for (let i = 0; i < O; i++) { 
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.// i RE for 循环 体内 有 效 


} 


console.log(i); 


let 不 允许 重复 声明 。 在 相同 作用 域内 ， 重 复 声 明 同 


// ReferenceError: i 


is not defined 


个 变量 会 报错 。 代 码 示例 如 下 : 


let a = 'ddfe'; 

let a = 'didiFamilyt' // 报错 
} 
{ 

let a = 'ddfe'; 

var a = 'didiFamilyt' // 报错 
} 

let 不 存在 变量 提升 。 因 此 ， 变 量 需要 在 声明 后 才 可 以 使 

console.log(foo); // fü undefined 
console.log(bar); // 报错 ReferenceError 
var foo = 'ddfe'; 
let bar = 'ddfe'; 


let 存在 暂时 性 死 区 (temporal deadzone， 以 下 简称 TDZ)， 即 指 在 当前 代码 块 内 如 果 使 用 


let 声明 变量 ， 则 在 该 条 声明 语句 之 前 ， 该 变量 不 可 用 。 代 码 示例 如 下 : 


if (true) { 
// TDZ 开始 
tmp = 'ddfe'; 


console.log(tmp); 


let tmp; 


console.log(tmp); 


tmp - 123; 


console.log(tmp); 


2. 


由 于 使 用 let 


有 


// ReferenceError 


// ReferenceError 


// TDZ 结束 


// undefined 


JJ X23 


let 在 Vue.js 中 的 使 用 


] ， 耕 则 会 报错 。 代 码 示 例如 下 : 


严谨 、 不 易 发 生 错误 同时 含有 块 级 作 


] 域 等 诸多 优点 , 在 Vue.js 中 运 


1 let 
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命令 的 情况 比比 缘 是 。 比 如 : 


// 在 src/config.js 文件 中 保存 了 全 局 配置 信息 


let delimiters = ['{{', 
let unsafeDelimiters = 


em 


明 的 : 


青 比 如 ， 在 /src/batcher.js X fl 


"got 
[站 


中 ，runBatcherQueue 函数 中 的 for 循环 变量 也 是 采用 let 声 


rr 


function runBatcherQueue (queue) { 
// do not cache length because more watchers might be pushed 


// as we run existing 


watchers 


for (let i = 0; i < queue.length; i++) { 


} 
queue.length = 0 


30.2.3 const 


1. const 的 使 用 


const 用 于 声明 一 个 常量 ， 一 旦 声明 ， 常 量 的 值 便 不 能 再 被 更 改 ， 进 入 只 读 模式 。 代 码 示 例 


如 下 : 


const PI = 3.141; 
PI // 3.141 
PI-23; 


PI // 3.141, 重新 赋值 无 效 ，PI 值 不 变 


在 严格 模式 下 ， 对 已 使 用 const 声明 的 变量 


read-only”。 


使 用 const 声明 后 不 得 再 更 改 的 特性 ， 也 意味 着 我 们 在 声明 变量 时 就 必须 初始 化 ， 不 能 留 


Imi 


新 赋值 甚至 会 报错 ， 提 示 “TypeError: 'xxx' is 


到 以 后 再 赋值 。 代 码 示例 如 下 : 


const ddfe; 
ddfe - 'wonderful'; // 
ddfe // undefined 


在 严格 模式 下 ， 使 


declaration ”。 


const 的 作用 域 与 let 相同 ， 只 在 声明 所 在 的 块 级 作用 域内 有 


重新 赋值 无 效 


J const 声明 变量 不 赋值 会 报错 ， 提 示 “SyntaxError: missing = in const 


Xl 


效 。 


const 与 let 一 样 ， 同 样 不 允许 重复 声明 ， 不 存在 变量 提升 以 及 TDZ。 
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wey 


， 还 需要 注意 的 是 , const 在 声明 复合 类 型 的 变量 时 ， 


并 不 保证 该 地 址 的 数据 不 变 〈 


大 


为 复合 类 型 的 变量 名 指向 数据 地 


const 声明 一 个 对 


使 用 


const ddfe 0 
ddfe.age = 4; 
// 4 


();// TypeError: 


ddfe.age 


ddfe - "foo" 


象 ， 并 不 能 


保证 


对 象 不 可 更 改 。 代 人 码 示例 如 下 : 


is read-only 


由 上 例 可 以 看 到 ， 使 用 const 声 


改变 ddfe 指向 的 对 和 象 地 址 。 


声明 一 个 对 象 ddfe 后 ， 对 象 内 的 属 


如 果真 的 想 达 到 对 


和 象 本 喘 不 可 变 的 效果 ， 则 应 当 
2. const 在 Vue.js 中 的 使 用 


使 


在 Vuejs 中 对 于 一 些 常 


的 变量 都 采 
H, X} transition 的 动画 类 型 的 声明 但 


性 


J Object.freeze 方法 ， 在 此 不 展 ] 


只 能 保证 变量 名 指向 的 地 址 不 变 ， 
址 而 不 指 


向 数据 )。 因 此 ， 如 果 


仍然 可 以 修改 。 但 不 可 


J Y const 方式 声明 。 比 如 在 src/transition/transition.js 
E 采 用 了 const 命令 。 代 码 示 例如 下 : 


const TYPE TRANSITION = 'transition' 
const TYPE ANIMATION - 'animation' 
再 比如 ， 很 多 正则 检测 用 的 变量 ， 也 都 使 用 const 声明 ， 因 为 这 些 都 是 一 经 声明 就 不 再 更 


改 的 常量 。 代 码 示例 如 下 : 


// src/compiler/compile.js 


const bindRE = /^v-bind:|^:/ 

const onRE = /^v-on:|^8/ 

const dirAttrRE = /^v-([^:]*) (?:$1|: (. *) $) / 
const modifierRE = /N.[^N.]*/g 

const transitionRE - /^(v-bind:|:)?transition$/ 
// src/filters/index.js 

const digitsRE = /(\d{3}) (?=\d)/g 


30.3 object 


1. Object.create 


语法 : 


Object.create(proto, [ propertiesObject ]) 
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参数 : 
O proto 一 一 一 个 对 象 ， 作 为 新 创建 对 象 的 原型 。 


O propertiesObject 可 选 。 该 参数 对 象 是 一 个 数组 与 值 ， 该 对 象 的 属性 名 称 将 是 新 创 
建 的 对 象 的 属性 名 称 ， 值 是 属性 描述 符 。 

注 : 该 参数 对 象 不 能 是 undefined。 另 外 ， 只 有 该 对 象 自身 拥有 的 可 枚 举 的 属性 才 有 效 ， 也 
就 是 说 ， 该 对 象 的 原型 链 上 属性 是 无 效 的 。 


oos 


抛 出 异常 : 如果 proto 参数 不 是 nul 或 对 象 值 ， 则 抛 出 一 个 TypeError 异常 。 


生 的 对 象 。 


in 


用 法 : 创建 一 个 拥有 指定 原型 和 若干 指定 属 4 


使 用 举例 ; 
// 下 面 的 例子 演示 了 如 何 使 用 object .create () 来 实现 类 式 继承 。 这 是 一 个 单 继承 


// Shape - superclass 


function Shape() { 
0; 
this.y = 0; 
} 
Shape.prototype.move = function(x,y) { 


this.x 


this.x += x; 
this.y += y; 
console.info("Shape moved."); 


}; 


// Rectangle - subclass 
function Rectangle() { 
Shape.call (this); // call super constructor 


} 
Rectangle.prototype = Object.create (Shape.prototype); 


var rect = new Rectangle(); 


rect instanceof Rectangle // true 


rect instanceof Shape // true 


rect.move(1, 1); // Outputs, "Shape moved." 


484 


Vue.js 权威 指南 


Vue.js 应 用 


IN 


i: 


// src/global-api.js 


// Vue.extend 


于 创建 基础 vue 构造 器 的 “ 子 类 ” 


Vue.extend = function 


var Sub = cre 
Sub.prototype 
Sub.prototype 


(extendOptions) { 


ateClass (name || 


= Object.create (Super.prototype) 


.constructor = Sub 


2. Object.keys 


'VueComponent' 


语法 : Objectkeys (obj) 
参数 : 
O obj 一 一 返回 该 对 象 的 所 有 可 枚 举 自 身 属性 的 属性 名 。 
用 法 : 返回 一 个 字符 串 数组 ， 其 元 素来 自 于 给 定 对 象 上 可 枚 举 的 属性 。 这 些 属性 的 顺序 与 
手动 这 历 该 对 象 属性 时 的 一 致 。 
使 用 举例 
var arr = ["a", "b", "c"]; 
alert(Object.keys(arr)); // 弹出 "0,1,2" 
/ 类 数组 对 象 
var obj € { 0 "uan. 1 : "p", 2 "ony; 
alert (Object.keys(obj)); // 弹出 "0,1,2" 
// getFoo 是 一 个 不 可 枚 举 的 属性 
var my obj = Object.create({}, { getFoo : { value : function () { return this.foo } ) }); 
my obj.foo - 1; 
alert(Object.keys (my obj)); // 只 弹出 foo 


` 


Vue.js 应 用 举例 : 


// src/util/lan 
// Mix properti 


export function 


g.js 
es into target object 
extend (to, from) { 


var keys = Object.keys(from) 


var i = keys.length 


while (i--) { 


to[keys[il]l 


= from[keys[il]l 
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} 


return to 


3. Object.isExtensible 


语法 : ObjectisExtensible(obj) 
参数 : 


O Obj {Object} 


HE: 判断 一 个 对 象 是 否 是 可 扩展 的 (是 否 可 以 在 它 上 面 添加 新 的 属性 )。 在 默认 情况 下 ， 
对 象 是 可 扩展 的 ， 即 可 以 为 其 添加 新 的 属性 并 且 其 _proto 属性 可 以 被 更 改 。 
Object.preventExtensions、Object.seal 或 Object.freeze 方法 都 可 以 标记 一 个 对 象 为 不 可 扩展 的 


(non-extensible ) 。 


È: HESS 中 ,如 果 参 数 不 是 对 象 类 型 ， 将 抛 出 一 个 TypeBrror HH. AESOP, AAR 
参数 将 被 视 为 一 个 不 可 扩展 的 普通 对 象 ， 因 此 会 返回 false。 
使 用 举例 : 
// 新 对 象 默认 是 可 扩展 的 


var empty = (); 


Object.isExtensible(empty); // --- true 


// oo .可 以 变 得 不 可 扩 


Object.preventExtensions (empty); 


Es 


Object.isExtensible(empty); // --- false 


// 密封 对 象 是 不 可 扩展 的 
var sealed = Object.seal({}); 


Object.isExtensible(sealed); // --- false 


// 冻结 对 象 也 是 不 可 扩展 的 
var frozen = Object.freeze({} 


a 


) 
Object.isExtensible(frozen); // === false 


Vue.js 应 用 举例 : 


// src/directives/public/for.js 
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// Cache a fragment using track-by or the object key 


cacheFrag (value, frag, index, key) ( 
var trackByKey = this.params.trackBy 
var cache = this.cache 


var primitive - !isObject (value) 
var id 
if (key || trackByKey || primitive) ( 


id = getTrackByKey(index, key, value, trackByKey) 
if (!cache[id]) { 


cache[id] = frag 
} else if (trackByKey !== 'Sindex') { 
process.env.NODE ENV !-- 'production' && 


this.warnDuplicate (value) 
} 
} else { 
id = this.id 
if (hasOwn(value, id)) { 
if (value[id] === null) { 
value[id] = frag 
} else { 
process.env.NODE ENV !== 'production' && 
this.warnDuplicate (value) 
} 
} else if (Object.isExtensible(value)) { 
def(value, id, frag) 
} else if (process.env.NODE ENV !== 'production') 


warn ( 


{ 


"Frozen v-for objects cannot be automatically tracked, make sure to ' + 


"provide a track-by key.' 


} 


frag.raw = value 


4. Object.getOwnPropertyNames 


语法 : Object.getOwnPropertyNames(obj) 
参数 : 
Q Obj {Object} 


用 法 : 返回 一 个 由 指定 对 象 的 所 有 自身 属性 的 属 


UE 


数组 
AN HY MOS Ja 


性 的 顺序 未 定义 。 


e 


枚 举 属 性 的 顺序 与 通过 for..in loop (或 Object.keys) 3&fV i208 $m 


生 名 《包括 不 可 枚 举 的 属性 ) 组 成 的 数组 。 


性 时 的 一 致 。 数 组 中 
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使 用 举例 : 
var arr = ["a", "b", "c"]; 
console.log(Object.getOwnPropertyNames (arr).sort()); // ["O", "1", "2", "length"] 
// 类 数组 对 象 
Var obj = Lue Ua. dn TOU. 2v "gt. 
console.log(Object.getOwnPropertyNames(obj).sort()); // ["O", "1", "2"] 
// 使 用 Array.forEach 输出 属性 名 和 属性 值 
Object.getOwnPropertyNames(obj).forEach(function(val, idx, array) { 
console.log(val + " -> " + obj[val]); 
)); 
// 输出 
//0-»a 
// 1 -> b 
// 2 -> c 
// 不 可 枚 举 的 属性 
var my obj = Object.create({}, { 
getFoo: { 
value: function() { return this.foo; }, 
enumerable: false 
} 
)); 
my obj.foo - 1; 
console.log(Object.getOwnPropertyNames (my obj).sort()); // ["foo", "getFoo"] 


Vue.js 应 用 举例 : 


// src/observer/index.js 


const arrayKeys = Object.getOwnPropertyNames (arrayMethods) 


5. Object.defineProperty 


语法 : Object.defineProperty(obj, prop, descriptor) 
参数 : 


O obj 一 一 需要 定义 属性 的 对 象 。 


O prop 一 一 需 被 定义 或 修改 的 属性 名 。 
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O descriptor 一 一 需 被 定义 或 修改 的 属性 的 描述 符 。 

用 法 : 该 方法 直接 在 一 个 对 象 上 定义 一 个 新 属性 ， 或 者 修改 一 个 已 经 存在 的 属性 ， 并 返回 
这 个 对 象 。 

HRS 该 方法 的 使 用 较为 复杂 ， 但 其 在 Vuejs 中 有 极为 重要 的 应 用 一 Vue.js 实现 数据 和 视 
图 联动 的 核心 原理 便 在 于 该 方法 。 在 第 2 章 中 有 Object.defineProperty 方法 的 详细 使 用 介绍 , 在 
JUR AA 


Vue.js 应 用 举例 : 


// src/util/lang.js 
export function def (obj, key, val, enumerable) { 
Object.defineProperty(obj, key, { 
value: val, 
enumerable: !!enumerable, 
writable: true, 
configurable: true 


} 


30.4 ”函数 柯 里 化 


函数 柯 里 化 (curry〉 过 程 是 通过 逐步 传 参 ， 在 每 一 步 中 返回 一 个 更 具体 的 部 分 配置 的 函 
数 的 过 程 。 通 过 不 断 传 参 的 过 程 ， 我 们 可 以 实现 对 函数 的 高 度 复 用 。 函 数 柯 里 化 是 利用 闭 包 、 
高 阶 函 数 特性 来 实现 动态 创建 函数 、 参 数 复 用 的 过 程 。 柯 里 化 可 以 使 得 代码 逻辑 更 加 清晰 、 
代码 实现 更 加 优雅 。 由 于 在 Vuejs 中 大 量 应 用 了 函数 柯 里 化 技术 ， 本 节 我 们 就 简要 介绍 一 下 


柯 里 化 的 使 用 。 


30.4.1 动态 创建 函数 


通常 ， 我 们 会 使 用 以 下 方式 来 注册 DOM 事件 : 


var addEvent = function(el, type, fn, capture) ( 


if (window.addEventListener) { 
el.addEventListener(type, function(e) { 
fn.call(el, e); 


}, Capture); 
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} else if (window.attachEvent) { 
el.attachEvent("on" + type, function(e) { 
fn.call(el, e); 


)); 


使 用 这 种 方式 的 问题 是 每 次 调用 addEvent 方法 时 ， 都 会 执行 一 次 判断 来 决定 使 用 哪个 方法 
Ff 事件。 实际 上 ， 我 们 可 以 在 页 面 载 入 后 只 进行 一 次 判断 ， 然 后 使 用 同一 注册 方法 注册 不 同 
的 事件 。 我 们 使 用 函数 柯 里 化 来 实现 : 


var addEvent = (function() { 


LE 
rn 
zu 


if (window.addEventListener) { 
return function(el, sType, fn, capture) { 
el.addEventListener(sType, function(e) ( 
fn.call(el, e); 
hy (capture)); 
); 
} else if (window.attachEvent) { 
return function(el, sType, fn, capture) { 
el.attachEvent("on" + sType, function(e) { 


fn.call(el, e); 


以 上 自 执 行 代码 首先 会 判断 浏览 器 支持 的 事件 注册 方法 ， 根 据 不 同 的 注册 方法 ， 返 回 一 个 
事件 注册 的 函数 赋值 给 addEvent， 以 后 调用 addEvent 方法 注册 事件 时 ， 内 部 就 不 会 再 次 进行 判 
断 了 ， 而 是 直接 使 用 当前 浏览 器 文 持 的 事件 注册 方法 来 注册 相应 的 事件 


| 四 


o 


30.4. BREA 


如 果 我 们 需要 求 10 与 任意 数 的 和 ， 则 可 能 会 这 么 写 : 


function sum(x, y) ( 


all. 


return x + y 
} 
sum(10, 20); // 30 
sum(10, 55); // 65 


